Create a CSS Hover Effect Image Gallery

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.


<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" />

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.


a img {

.thumb_wrap {
margin:0 25px 0 0;

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() {




…..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.

Published by

Rob Allport

Web Developer based in Stoke-on-Trent Staffordshire Google+ - Twitter

4 thoughts on “Create a CSS Hover Effect Image Gallery”

  1. 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 🙂

  2. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *