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 Social Network to add comments!

Join Ning Creators Social 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

Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hi Cindy,
Thanks for the nice words, we are doing our best to make Ning 3.0 even more functional th…"
1 hour ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hi there!
We do appreciate your wish to help, thanks a lot!
As you have may seen from my previous c…"
1 hour ago
joseph wade burnley is now a member of Ning Creators Social Network
1 hour ago
Cindy Dean Mccoy replied to Kyryl_Ning_Support's discussion Paid Access demo version
"I am so excited about Ning 3 being upgraded.  I look forward to the day Ning 3 has the features we…"
6 hours ago
Kyryl_Ning_Support replied to Dr. Krishna Kumari Challa's discussion I am unable to find discussions on my network when I search. Any solutions?
"Hi Claudio!
Our system administrators working on this issue at the moment, so the search should be…"
15 hours ago
Kyryl_Ning_Support replied to M.Tariq Malik's discussion "Network not launched yet" Error on vustudents.ning.com.
"Hi there!
Yes, the network should be back online.
Sorry for that.
Best regards,
Ning Team."
15 hours ago
Kos replied to M.Tariq Malik's discussion "Network not launched yet" Error on vustudents.ning.com.
"It's up and running in Firefox for me at 9:30 a.m."
16 hours ago
Claudio Acosta replied to Dr. Krishna Kumari Challa's discussion I am unable to find discussions on my network when I search. Any solutions?
"Similar problema tengo en mi red www.trabajoenelnea.com.ar, no funciona ninguna de las funciones de…"
16 hours ago
Ning via Facebook

#unitewithNING Facing routine? Ready to meet unknown Celtic traditions and growing Wisdom? :)…

Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hi Silvia,
I hope you wish to join the beta test of the paid access as well, so I have sent you the…"
yesterday
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hi there!
Thanks for supporting us and you willing to help!
I have sent some questions to you via p…"
yesterday
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hello Mike,
Thanks for responding.
I have sent you the private message to confirm some details.
Bes…"
yesterday
Olivia Salazar and alexandre gera joined Ning Creators Social Network
yesterday
Ceddy J replied to Kyryl_Ning_Support's discussion Paid Access demo version
"As always, I'm eager to help each other grow!"
Sunday
Sílvia Mota replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Meu contato: silviamota@silviamota.com.br"
Saturday
J.Ayvar replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Amazing News !<br/>

Our Site tin.dating Will be Perfect to test this New feature."
Friday
Kos replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Matt the code in 2.0 is old, out of date and degrading over time - which is why they built 3.0.  3.…"
Friday
Mike Collins replied to Kyryl_Ning_Support's discussion Paid Access demo version
"I'd like to be involved in looking at paid access demo please "
Friday
Harly replied to Ivy Williams's discussion Ning Roleplay Sites
Friday
Kyryl_Ning_Support replied to Dr. Krishna Kumari Challa's discussion I am unable to find discussions on my network when I search. Any solutions?
"Hi there,
We are sorry for this. Previously we have been fixing the search on each network separate…"
Friday
More…