Create a fancy responsive image-on-hover effect

In this tutorial we will create a fancy image-on-hover effect. We’ll use pure css3 and provide a jQuery solution for the browsers that do not support opacity and transitions. We will also take care that it works responsively.

Two version of an image

Download the source files

Fancy responsive image-on-hover effect
.zip 0.2MB

Step 1 : Photoshop

We have to prepare two versions of the image : the image we want to see on hover and its desaturated copy. Mine are 845px x 515px.

Two version of an image

Step 2 : Let’s start with the html markup

..
<div id="wrap">
<ul>
   <li>
      <div>
          <img src="img/tut1_desaturated.jpg"/>
          <span class="shadow"></span>
          <img class="onhover" src="img/tut1_color.jpg"/>
      </div>
   </li>
</ul>
</div>

Step 3: Basic styles

We start our stylesheet with a basic reset.

html, body, div, span, h1, h2,  p, a,  ul, li, img
{margin: 0; padding: 0;
border: 0; outline: 0;
font-size: 100%;background: transparent;}
ul {list-style: none;}

The main containing element #wrap is centered up and given the specific width 865 px = 845px (image size) + 2x10px (borders size).
The div that contains the images is given position:relative (to properly position the two versions of the image) and overflow hidden (we will size up and rotate our images and we want to hide the exceeding parts).

#wrap { width: 865px; margin: 0 auto;}
ul {margin-top:50px; }
li div {width:845px; height:515px; overflow:hidden; position:relative;
border:10px solid white; box-shadow: 0 2px 5px  rgba(0,0,0,.4);}

Step 4: Grayscale to color transition (see demo)

The img element is positioned relatively, the colored version (.onhover) is given 0 opacity and absolute position. When the containing div is being hovered over the opacity of .onhover element changes to 1. To make the transition smooth we apply the transition property to img. (For simplicity I decided to omit all vendor prefixes).

img {position:relative; top:0;left:0;
transition:all 1.5s .5s; }
img.onhover {opacity:0;position:absolute;}
li div:hover img.onhover {opacity:1;}

To deepen the effect of transition between the normal and hover state we will add a fading out inner shadow (span.shadow):

.shadow {position:absolute; top:0; left:0; opacity:1; background:transparent;
width:100%; height:100%;
box-shadow: inset 0 0 60px 20px rgba(37,27,23,.5);
transition:opacity 1.5s .5s;}
li div:hover .shadow {opacity:0;}

Step 5: Let’s add scaling and rotation (see demo)

We just have to add the transform property, specify the transform origin as well as the transform parameters in hover state.

img {position:relative; top:0;left:0;
transition:all 1.5s .5s;
transform: rotate(-4deg) scale(1.2);
transform-origin:50% 50%;}

li div:hover img {transform: scale(1) rotate(0);}

Step 6: And what if we want it responsive ? (see demo)

First let’s modify a little bit the style of #wrap and the li div to keep them flexible. In the latter case we just no longer specify the height and width of the element.

#wrap { max-width: 865px; margin: 0 auto; width:95%;}
li div { overflow:hidden; position:relative;
border:10px solid white; box-shadow: 0 2px 5px rgba(0,0,0,.4);}

We have also to modify the styling of the img element – we add three new properties to the img element.

img {max-width:auto; vertical-align:bottom; width:100%;}

Step 7: jQuery solution

We will add a jQuery solutions for IE.

<!--[if lt IE 9]><script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
	$(document).ready(function() { 
           $('.onhover').hide();
$('li div').hover(function(){
$(this).find('.onhover').fadeIn(1000);
},function(){
$(this).find('.onhover').fadeOut(1000);
})
})
</script><![endif]-->

You can also go further and recreate the full transition with jQuery animate function.

And that’s it. I hope you got inspired by this example – it’s your turn to play with css transitions. Enjoy !

9 thoughts on “Create a fancy responsive image-on-hover effect”

  1. Hey, I tried this as opposed to using two separate images, but for some reason, both versions (on and off) show when I load my page. Any idea what I am doing wrong?
    Thanks
    Cheers!

  2. Great Tutorial! Just what I was looking for! My only problem is with the img property. Is there a way I can single out the img property so it doesn’t affect the other image elements on my page? I tried to add a class to it but the rollover doesn’t work when I add it. Is there another way around that so the rollover can work without affecting other images on the page? Thanks!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">