Stunning effect when you hover over the image

In this lesson we will learn to make an interesting effect when you hover over the image. We will create it using css3, and add JQuery for browsers that do not support transparency, and Property ID transition. Also, we will make sure that our images have been adaptive.

Click on the image to see a demo:

Step 1: Photoshop

We need 2 versions of the images: the image that we want to see when the mouse and its black and white copy. Our image size of 845px x 515px.


Step 2: Layout html

..
<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: Adding styles
First, let's cast off unwanted styles, we add the following code:

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 container called # wrap centered and has a size of 865 px = 845px (image size) + 2x10px (stroke).
diva, which put an image by assigning the property position: relative (to correctly position the two variants of the image) and the overflow: hidden (to hide the unwanted parts, when we rotate and zoom).

#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: Animation of a black and white to color
The main image is of relative positioning, the value of transparency . onhover (color image when the mouse) - 0 and set absolute positioning. When you point to a general for the divas. onhover transparency is changed to 1 . To make the effect smoother transition to add a property to the image . (In the example given is not a prefix for browsers).

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 enhance the effect of the transition between the normal state and the state of the image when the mouse, we add an inner shadow fading ( 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 a scaling and rotation
We just need to add a property to transform, specify the time, as well as options when you move.

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: Make an image adaptive
First, let's change the styles for # wrap , list items (li div), to make them with rubber. In the latter case, we simply do not indicate 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 must also change the style of the element IMG - it will add three new properties.

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

Step 7: Add jQuery

Add JQuerry, so that our images are displayed correctly in 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]-->

That's all. I hope you are inspired by this example, it's your turn to play with the property css transitions.

By lesson - pehaa