Create a fancy responsive image-on-hover effect

11/02/12

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 Responses to “Create a fancy responsive image-on-hover effect”

  1. Aakash

    Feb 15th, 2012

    Neat blog !! lovely ! :-)

  2. anze

    May 10th, 2012

    What a beautiful effect, the transition works so smoothly , and so little code to work with :) tnx!

  3. […] Create a fancy responsive image-on-hover effect  | PeHaa Blog The last few posts I’ve been working through the background and borders module for css3. So far we’ve looked at css backgrounds , simple borders, and rounded corners . […]

  4. Rod

    Aug 10th, 2012

    Very good job !

    I will try this very soon ! :-)

    Thanks :-)

  5. Dylan

    Aug 15th, 2012

    Great tutorial to get started with CSS3, thank you!

  6. e11world

    Aug 30th, 2012

    I’m loving this site and the tutorials you are doing!!

  7. mark

    Sep 13th, 2012

    Awesome tutorial!! It’s great to see stuff out there that works in responsive layouts.

  8. vibhor

    Apr 30th, 2013

    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!

  9. Zizi

    Jul 23rd, 2013

    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