After browsing through a a few web portfolios lately I’ve noticed a rather noce efefct – whereby when the user hovers over a thumbnail an image appear – this may be a zoom icon (for images) or a play button (for videos). In thus article I’ll quickly run through the simple steps on who we create a a funky css hover effect image gallery. This is a very useful technique for any sort of site that display thumbnails links.
The HTML
<div class="thumb_wrap"> <a href="#link" class="thumb_link"> <span><img src="play.png" alt="play" class="play_video" /></span> <img src="thumb.jpg" alt="thumbnail" /> </a> </div>
I’ve simply nested a span tag containing the hidden play button. Additionally, to keep everything XHTML valid, the hyperlink doesn;t contain block level elemnts.
The CSS
a img { border:none; } .thumb_wrap { width:194px; height:110px; margin:0 25px 0 0; float:left; } img.play_video { position: absolute; margin:40px 0 0 80px; display: none;}
The CSS is simply sets the image’s position absolutely (to ensure nothing gets pushed out of line).
The JQuery
The give the show effect a nice fade in style and in order the show our hidden image I’ll add a small piece of JQuery that finds the image within our span tag and fades it in. The latter is done when the user hovers over the image, when the mouse leaves, the image is hidden again. The folllwing would go within the head tag (I’ve also let Google CDN host my JQuery file):
<script type="text/javascript"> $(document).ready(function() { $(".thumb_link").mouseover(function(){ $(this).find('img.play_video').fadeIn('slow'); }); $(".thumb_link").mouseout(function(){ $(this).find('img.play_video').hide(); }); }); </script>
…..and that’s it. You now have a cross browser compatible (IE 6 plus) image gallery effect, that is very easy to implement. See the image gallery in action.
It can be so easy to just blindly use pugins for this kind of stuff but so much more rewarding to do it yourself, thanks
Yes, definately agree. I’m all for using plugins, but they simply aren’t required sometimes. Doing small things like in this article also help’s me to learn 🙂
Thank you. Tried this and everything works fine but when the cursor hovers above the actual play/video icon – then icon blinks and hovers out of order.
Not that i tested when I wrote the article, but what browser were you using?