Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

last week i posted a tip that zooms the main page forum and blog posts when you hover over it well i tweaked it a tad  increasing the zoom by 5% and added a transparency as it zooms as well as added a z-index so the profile icon below it doesn't float over it

the live demo can be seen here

http://www.dreadlockssite.com/main/

the code;

.xg_widget_main .module_blog .blogpost:hover,.xg_widget_main .module_forum div.vcard div.topic:hover {background-color:#14135E;-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-webkit-transition:all .6s ease-out;-moz-transition:all .6s ease-out;opacity:0.70;z-index:999999;}

adjustments;

ofcourse background color should be adjusted to something that matches youtr theme or delete it to have no background color change

scale is the zoom level 1.25 means 125% or 25% above normal 1.35 would zoom 10% more 1.15 10% less
transition speed .6 is 6/10th of a second just over 1/2 a second to complete the ease out animation you can also add a delay like if you want it to wait 1 second then ease out for 1 second  (but i dont think a delay makes sence for this purpose)

opacity 0.70 is 70% opaque or 30% transparent adjust the 0.70 higher towards 1 to be less opaque or lower  to be more see through i settled on 70 which alowed the elements behind it to be sen without making it too unreadable

i had applied the same effectto the forum posts and replies but it made long posts grow too far since both length and width  increased 25%   a long post could completely cover a shorter reply above and below it

thats why i got inspired to add the transparency so you could at least tell there was something behind it, but it didnt solve the problem so i left it out and id not include code to apply the effect to those posts and replies.

for an even cooler effect

add border radius and box shadow to the hover code above

your forum posts that dont have  the border radius and box shadow  till hovered will zoom  the corners go from square to round and the shadow  apear as it transitions

edit:

to add  a floating effect that rounds the corners adds a shadow and zooms all in 1 motion try this code


.xg_widget_main .module_blog .blogpost:hover,.xg_widget_main .module_forum div.vcard div.topic:hover {border:1px solid #ccc;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;-webkit-box-shadow:6px 6px 10px #ccc;-moz-box-shadow:6px 6px 10px #ccc;box-shadow:6px 6px 10px #ccc;width:535px;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-webkit-transition:all .6s ease-out;-moz-transition:all .6s ease-out;
z-index:999999;background-color:#fff;padding:1em;}

notes i added a white background u can change that  without the background it acts like theres no background and you see everything behind it

i also added padding to keep the text from extending outside the now rounded borders

that effect can be seen on my new site www.phillyhangout.com

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

  • thats why i didnt use it there  but  thats a function of z-index

    z-index moves it forward or bactwards in the stacking order the higher the number the more forward some divs may have a very high z-index to make it topmost  just experiment with setting that higher

    you may also need to add a position; (relative fixed or absolute)

    • Looks good SoaringEagle.

      • thnx  the morphing borders effect if you add thats pretty cool  it unintentionaly was added to many members pages  in the menu so subtabs morph from rectangle to rounded as they slide out..its pretty cool  and adding it to the main page posts would be pretty unique

        i already had rounded corners and shading so left it as is

  • @alexander could you please tell me how you did it for the latest activity..thanks

  • hey soaringeagle how is the script written for late activity..having problem doing this thanks

    • try

      div.feed-story:hover as the selector

      if that dont work let me know

      • Hey eagle where do i place it at in the code..do i just change the part that says..div.vcard div.topic:hover ...?

        • div.feed-story:hover {background-color:#14135E;-webkit-transform:scale(1.25);-moz-transform:scale(1.25);-webkit-transition:all .6s ease-out;-moz-transition:all .6s ease-out;opacity:0.70;z-index:999999;}

          • SWEEEET,Thanks so much

This reply was deleted.

Search the Creators Network

Latest Activity

Robert Spencer replied to Brandon Owens's discussion 3 essential back-end changes that Ning could make to increase Everyone's traffic
"...maybe minutes, sometimes seconds.."
2 hours ago
Ofelia B.G. replied to Ofelia B.G.'s discussion Error 500
"I never had that problem before untill now, but yeah i see there is some issues in the server of 2.…"
10 hours ago
ONE HAPPY FAMILY replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"http://zbijadek.ning.com my web no works what is problem I see:
500: Unexpected Error
Please try re…"
11 hours ago
George H. Compton IV replied to Saurabh's discussion link for facebook sign up
"Hello Saurabh. :-) Here's the link you're using but shortened. I'm not quite sure if that's what yo…"
11 hours ago
TJ @ jQueryHelp replied to Chris Pileggi's discussion Counting Likes and Comments with PHP? (Ning 2.0)
"That's pretty much most of what I've done all these years - interface Ning sites with external serv…"
11 hours ago
George H. Compton IV replied to Mary Jane Peterson's discussion Activity Box
"Hi Mary, all fixed... You had it set to only show on profiles."
12 hours ago
George H. Compton IV replied to George H. Compton IV's discussion A tip all Ning3 networks can benefit from. "fluid YouTube & Vimeo Videos" N2 & N3
"I'm sorry Shelly!!!   I've changed the wording in this discussion to make it clearer on what this c…"
12 hours ago
Andrzej Góralczyk replied to Ofelia B.G.'s discussion Error 500
"My network also suffers this error, repeating every few days.Business Dialog, Poland."
12 hours ago
Gina Krupsky replied to Ofelia B.G.'s discussion Error 500
"I have it too. Ugh."
13 hours ago
Vincent Granville replied to Ofelia B.G.'s discussion Error 500
"Yes, two of my Ning networks (one with 40,000 members) experience this for hours pretty much twice…"
13 hours ago
John Bizley replied to Mary Jane Peterson's discussion Activity Box
"You need to add to your homepage, go to your site & pages then click on your homepage in the list,…"
14 hours ago
Kos replied to Ofelia B.G.'s discussion Error 500
"Yes, intermittently on 2.0 (not on 3.0)  Ning needs to fix that server........."
14 hours ago
Shelly Begarowicz replied to George H. Compton IV's discussion A tip all Ning3 networks can benefit from. "fluid YouTube & Vimeo Videos" N2 & N3
"For all us CODE CHALLENGED individuals.  This code makes the videos resize themselves according to…"
15 hours ago
o.d. brooks replied to Ofelia B.G.'s discussion Error 500
"The Error 500 message has been happening on and off for the past month or two on the Ning 2 network…"
15 hours ago
soaringeagle replied to Brandon Owens's discussion 3 essential back-end changes that Ning could make to increase Everyone's traffic
"haha yea true and jamroom guys are just absolutely amazing and give u absolutely everthing u ask fo…"
16 hours ago
Strumelia replied to Brandon Owens's discussion 3 essential back-end changes that Ning could make to increase Everyone's traffic
"This thread with suggestions is almost three years old now.  You guys keep on dreamin' that happy d…"
16 hours ago
soaringeagle replied to Brandon Owens's discussion 3 essential back-end changes that Ning could make to increase Everyone's traffic
"you know i8t took me a year to get them to fix the meta description tags so it didnrt  inckude the…"
18 hours ago
soaringeagle replied to Brandon Owens's discussion 3 essential back-end changes that Ning could make to increase Everyone's traffic
"u know nings never going to bother
im moving to jamroom (wich is freaking awesome)
they already hav…"
18 hours ago
George H. Compton IV replied to George H. Compton IV's discussion A tip all Ning3 networks can benefit from. "fluid YouTube & Vimeo Videos" N2 & N3
"Thank you Fire-Tech :-)"
18 hours ago
George H. Compton IV replied to George H. Compton IV's discussion A Christmas gift for all Christian/Religious networks, A Dramatized audio Bible!!!
"Thank you Jim, blessings.."
18 hours ago
More…