Add Hover Image Effect to Latest Activity, Blogs, Forums, Notes and Text Boxes - JenSocial: Social Web Directory and Ning Tips2024-03-28T16:28:16Zhttp://jensocial.com/forum/topics/add-hover-image-effect-to?groupUrl=ningnetworktips&commentId=2154984%3AComment%3A343337&groupId=2154984%3AGroup%3A74347&feed=yes&xn_auth=noWorks like a charm!
Thank you…tag:jensocial.com,2013-04-19:2154984:Comment:4933812013-04-19T01:38:41.158Z7Hhttp://jensocial.com/profile/HollyDilatush
<p>Works like a charm!</p>
<p>Thank you, Jen.</p>
<p></p>
<p>As always, appreciate the prompt, perfect assist,</p>
<p>Holly</p>
<p></p>
<p>Works like a charm!</p>
<p>Thank you, Jen.</p>
<p></p>
<p>As always, appreciate the prompt, perfect assist,</p>
<p>Holly</p>
<p></p> Hi Holly,
Glad you liked the…tag:jensocial.com,2013-04-18:2154984:Comment:4933632013-04-18T06:17:26.926ZJenSocialhttp://jensocial.com/profile/jmarco
<p>Hi Holly,</p>
<p>Glad you liked the tip! Give this a try for the Event Listings on home page:</p>
<p>/* Event Listing Hover */<br/>.xg_widget_main .module_events ul.clist li:hover {</p>
<p> background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0 transparent;</p>
<p>}</p>
<p>Best,</p>
<p>Jen</p>
<p>Hi Holly,</p>
<p>Glad you liked the tip! Give this a try for the Event Listings on home page:</p>
<p>/* Event Listing Hover */<br/>.xg_widget_main .module_events ul.clist li:hover {</p>
<p> background:url('http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png') repeat scroll 0 0 transparent;</p>
<p>}</p>
<p>Best,</p>
<p>Jen</p> Hello Jen,
This is another of…tag:jensocial.com,2013-04-17:2154984:Comment:4932992013-04-17T23:08:36.023Z7Hhttp://jensocial.com/profile/HollyDilatush
<p>Hello Jen,</p>
<p>This is another of your tips we've used and liked.</p>
<p>But, as usual, I have a question.</p>
<p></p>
<p>Is it possible to have/add this same effect to the event calendar listings on our home page, too?</p>
<p><a href="http://lewwwp.com" target="_blank">http://lewwwp.com</a> </p>
<p></p>
<p>Thanks for any help you might be able to give us,</p>
<p>Holly</p>
<p>Hello Jen,</p>
<p>This is another of your tips we've used and liked.</p>
<p>But, as usual, I have a question.</p>
<p></p>
<p>Is it possible to have/add this same effect to the event calendar listings on our home page, too?</p>
<p><a href="http://lewwwp.com" target="_blank">http://lewwwp.com</a> </p>
<p></p>
<p>Thanks for any help you might be able to give us,</p>
<p>Holly</p> Hi Chloe!
I don't mind at all…tag:jensocial.com,2012-09-09:2154984:Comment:4715622012-09-09T16:33:43.297ZJenSocialhttp://jensocial.com/profile/jmarco
<p>Hi Chloe!</p>
<p>I don't mind at all, it's a public tip. <strong>Very nice, thank you for sharing!</strong></p>
<p>Since my version is quite old, if you want to add as a tip under <a href="http://jensocial.com/forum/categories/ning-tips-tricks/listForCategory" target="_self">Ning Tips & Tricks Forum</a><a href="http://jensocial.com/forum/categories/ning-tips-tricks/listForCategory" target="_self"></a>, that'd be great too. =)</p>
<p>Have a nice rest of day,</p>
<p>Jen</p>
<p>Hi Chloe!</p>
<p>I don't mind at all, it's a public tip. <strong>Very nice, thank you for sharing!</strong></p>
<p>Since my version is quite old, if you want to add as a tip under <a href="http://jensocial.com/forum/categories/ning-tips-tricks/listForCategory" target="_self">Ning Tips & Tricks Forum</a><a href="http://jensocial.com/forum/categories/ning-tips-tricks/listForCategory" target="_self"></a>, that'd be great too. =)</p>
<p>Have a nice rest of day,</p>
<p>Jen</p> If you find the margin a bit…tag:jensocial.com,2012-09-09:2154984:Comment:4715502012-09-09T09:48:05.157ZChloe Alison Princehttp://jensocial.com/profile/ChloeAlisonPrince
<p>If you find the margin a bit to annoying because it moves off the curser when hovered, change the entire line: <em>margin:40px!important; padding:0,40px;</em> </p>
<p>to this:<br/><br/>margin:10px 20px 10px 20px;<br/><br/><br/></p>
<p>If you find the margin a bit to annoying because it moves off the curser when hovered, change the entire line: <em>margin:40px!important; padding:0,40px;</em> </p>
<p>to this:<br/><br/>margin:10px 20px 10px 20px;<br/><br/><br/></p> Jen, I hope you don't mind, b…tag:jensocial.com,2012-09-09:2154984:Comment:4714672012-09-09T09:14:32.475ZChloe Alison Princehttp://jensocial.com/profile/ChloeAlisonPrince
<p>Jen, I hope you don't mind, but I took your code and jazzed it up with a bit of code to make the blogs and forum posts animate and stand out as a user scrolls over them. There is a delay of .5s so its not annoying as you scroll through them, but once hovered over, the post is animated to the center, and a border is put around the post to make it look singled out from the rest - take a look at the screen capture. Its a sweet little effect!!</p>
<p></p>
<p>You can see it…</p>
<p>Jen, I hope you don't mind, but I took your code and jazzed it up with a bit of code to make the blogs and forum posts animate and stand out as a user scrolls over them. There is a delay of .5s so its not annoying as you scroll through them, but once hovered over, the post is animated to the center, and a border is put around the post to make it look singled out from the rest - take a look at the screen capture. Its a sweet little effect!!</p>
<p></p>
<p>You can see it and try it out on the front of my network - <a href="http://www.PINKessence.com" target="_blank">www.PINKessence.com</a></p>
<p></p>
<p></p>
<p><a href="http://storage.ning.com/topology/rest/1.0/file/get/301614463?profile=original" target="_self"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301614463?profile=RESIZE_1024x1024" width="721" class="align-full"></a></p>
<p></p>
<p></p>
<p>As you can see, my Blog I am hovering over is now highlighted and stands out - if the user removes the curser, it returns to position. <br><br>Here is the code I use to do it:<br><br></p>
<p>/* Blog Hover */<br>.xg_widget_main .module_blog .blogpost:hover <br>{background:url(<a href="http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png" target="_blank">http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg...</a>) repeat scroll 0 0 transparent!important; <br> margin:40px!important; padding:0,40px;<br> border-radius:10px;<br> border-color: #663366;<br> border-style:solid;<br> border-width:3px;<br> -webkit-transition:all .5s ease-out; <br> -moz-transition:all .5s ease-out;<br> transition-delay: .5s;<br> -moz-transition-delay: .5s; /* Firefox 4 */<br> -webkit-transition-delay: .5s; /* Safari and Chrome */<br> -o-transition-delay: .5s; /* Opera */}<br><br><br></p>
<p>/* Forum Hover */<br>.xg_widget_main .module_forum div.vcard:hover {background:url(<a href="http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg_alt.png" target="_blank">http://static.ning.com/socialnetworkmain/widgets/index/gfx/table/bg...</a>) repeat scroll 0 0 transparent;<br> margin:40px!important; padding:0,40px;<br> border-radius:10px;<br> border-color: #663366;<br> border-style:solid;<br> border-width:3px;<br> -webkit-transition:all .5s ease-out; <br> -moz-transition:all .5s ease-out;<br> transition-delay: .5s;<br> -moz-transition-delay: .5s; /* Firefox 4 */<br> -webkit-transition-delay: .5s; /* Safari and Chrome */<br> -o-transition-delay: .5s; /* Opera */}<br><br><br><br><br></p>
<p></p> Thanks :)tag:jensocial.com,2012-08-21:2154984:Comment:4688902012-08-21T01:40:15.613ZFire-Techhttp://jensocial.com/profile/FireTechnicianSolutions
<p>Thanks :)</p>
<p>Thanks :)</p> Good deal, thanks for the upd…tag:jensocial.com,2012-08-20:2154984:Comment:4687272012-08-20T22:05:42.658ZJenSocialhttp://jensocial.com/profile/jmarco
<p>Good deal, thanks for the update! Good investigative coding! =)</p>
<p>Good deal, thanks for the update! Good investigative coding! =)</p> I finally figured it out! Bas…tag:jensocial.com,2012-08-18:2154984:Comment:4683622012-08-18T04:32:12.516ZFire-Techhttp://jensocial.com/profile/FireTechnicianSolutions
<p>I finally figured it out! Basically, if you use the tr or tr.alt, it still separates the td.lb-rank and the td.lb-content (in chrome) and they hover separately from each other.</p>
<p>However, if you add a border to it (tr or tr.alt), it will cover them both (rank & content). I happened to want a border, so it worked out for me. If anyone needs the same thing, but without the border, just set the border to 0.</p>
<p>I was determined to figure this one out so I wouldn't have to bug ya,…</p>
<p>I finally figured it out! Basically, if you use the tr or tr.alt, it still separates the td.lb-rank and the td.lb-content (in chrome) and they hover separately from each other.</p>
<p>However, if you add a border to it (tr or tr.alt), it will cover them both (rank & content). I happened to want a border, so it worked out for me. If anyone needs the same thing, but without the border, just set the border to 0.</p>
<p>I was determined to figure this one out so I wouldn't have to bug ya, but thanks! :)</p>
<p></p> It's tough for me to find a n…tag:jensocial.com,2012-08-14:2154984:Comment:4675882012-08-14T05:10:12.861ZJenSocialhttp://jensocial.com/profile/jmarco
<p>It's tough for me to find a network with leaderboard on home page in this location. Can you send signin via pm, and I'll take a look.</p>
<p>=)</p>
<p>It's tough for me to find a network with leaderboard on home page in this location. Can you send signin via pm, and I'll take a look.</p>
<p>=)</p>