Add Hover Image Effect to Latest Activity, Blogs and Forum Listings

[Jen]

This is the latest Ning Tip on JenSocial. See it in action: JenSocial.com

I'm enjoying this effect on my site. It is a simple block of CSS that adds an extra flare of elegance to your Home Page Listings for Latest Activity, Blogs and Forums, when hovered.

The CSS will add an image background when someone hovers a listing or entry. You can replace the image below with your chosen image. You can also change the code from background:url to background-color:#e6e6e6, and change to color of your choice.

Edit attached code to suit your preferences, and add to Advanced CSS via:
My Network/Settings/Appearance

/** Add Hover Background Effect for Latest Activity and Forums - HOME PAGE **/
.xg_widget_main .module_forum .discussion:hover {background:url("https://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png") repeat scroll 0 0 transparent;}
.xg_widget_main .feed-story:hover {background:url("https://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png") repeat scroll 0 0!important;}

.xg_widget_main .module_blog .blogpost:hover {background:url("https://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png") repeat scroll 0 0 transparent!important;}

/** End Hover Effect **/

It appears that the Discussion boxes are messing up the image url. Use the attached file for code.

Enjoy!
Jen

[Robert]

I added this last night and it is a great tip.. thanks  Jen 

[For Sanity's Sake]

Hi Jen!

This is great!! thank you!!! you think it could be done something similar in the blog?

[Jen]

Glad you like it!

Try this:

.xg_widget_main .module_blog .blogpost:hover {background:url(https://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg...) repeat scroll 0 0 transparent!important;}

 

I updated the tip to include blog posts.

[Jen]

That is for the leaderboard, and not related to this tip.

Try this:

table tr.alt {background-image:none; background-color:#ff0000!important;}

Best,

Jen

[Jen]

See, if you had started a new topic, many people could benefit from the code. ;-)

[Jen]

;-)

[Victor C]

Works great, thanks!

[Brian Floe]

this is not working for me - strange. I'll keep trying.

[Jen]

Brian,

The LA had a column indicator and shouldn't have. I have updated the code. Hopefully that will help.

Best,

Jen

[Spyro]

great tip thank you, it works fine in blogs and forum but is not working in the latest activity