How to create a hover effect to the image using CSS3

Dear friends, today I want to share with you an interesting effect of CSS , which you can easily use when working on their projects. I called him hover effect to the image using CSS3 . Today, let's try a few to diversify our images. Let us give them some momentum. this is a very revitalize your website. The essence of the effect is to make the image a little increase in size when you hover the mouse cursor on it. The image will be like fish out of the page. This effect looks very good. So, as always, we will not use anything but CSS3.

Create an interesting effect for hover image using CSS3.

Previously, in order to achieve this result we would have had to use jquery . Now CSS3 allows you to do so easily and beautifully. But there is one thing but the truth. The effect will only work on browsers supporting the specification CSS3 . So for all the latest browsers.

Here is how this effect:




The working version of the effect.

You can see

Do not forget that you must check the availability of the effect in the latest version of your browser , which should support CSS3 and HTML5 . Although here we only use the CSS3 .

How do I do?

To this effect, we will need to create a structure in HTML blocks and assign the appropriate styles to the CSS .

HTML

As an HTML element using a block for the image and the block layer about this picture, which will gradually disappear when you move the mouse. Here is a rough structure of our block images:

Source code:

<div class='images' id='image1'>
<div class='layer'></div>
<img src='images/picture.jpg' alt="" width="200" height="200" border="0" />
</div>

<div class='images' id='image2'>
<div class='layer'></div>
<img src='images/picture.jpg' alt="" width="200" height="200" border="0" />
</div>  

<div class='images' id='image3'>
<div class='layer'></div>
<img src='images/picture.jpg' alt="" width="200" height="200" border="0" />
</div>  

<div class='images' id='image4'>
<div class='layer'></div>
<img src='images/picture.jpg' alt="" width="200" height="200" border="0" />
</div>

CSS3

In the style we use the transformation property ( Transform ). That is an increase in scale. In the normal state the size of image 100%. If you hover the mouse, the image is increased by 120%. The transformation will make a smooth and define the duration of the effect of 0.5 sec. This is the time for which the image will swim from one state to another. Assign these properties for different browsers such as Opera , FireFox , Chrome and other support CSS3 . Also, we will need to remove the shadowing layer over the image to the image as it was manifested. I'm specifically for each individual appointed shading layer styles, so you can see how we can remove these layers. The result had been there a CSS code for the hover effect on images:

Source code:

. Images {
        float : left ;
        margin : 20px ;
        -Webkit-transform: scale ( 1.0 );
        -Webkit-Transition-duration: 0.5 s;
        -Moz-transform: scale ( 1.0 );
        -Moz-Transition-duration: 0.5 s;
        -O-transform: scale ( 1.0 );
        -O-Transition-duration: 0.5 s;

}
. Images: hover {
        Box-Shadow: 0px  0px  40px  # CCC ;
        -O-transform: scale ( 2/1 );
        -O-Box-Shadow: 0px  0px  40px  # CCC ;
        -Moz-transform: scale ( 01.02 );
        -Moz-Box-Shadow: 0px  0px  40px  # CCC ;
        -Webkit-transform: scale ( 1/2 );
        -Webkit-Box-Shadow: 0px  0px  40px  # CCC ;
}
. Images. Layer {
        width : 200px ;
        height : 200px ;
        Background-Color : # 000 ;
        position : absolute ;
        Opacity: 0.5 ;
        -O-Transition-duration: 0.8 s;
        -Moz-Transition-duration: 0.8 s;
        -Webkit-Transition-duration: 0.8 s;
}
# Image a: hover. Layer {
        width : 0% ;
}
# Image 2: hover. Layer {
        height : 0% ;
}
# Image 3: hover. Layer {
        height : 0% ;
        margin-top : 100px ;
}
# Image four: hover. Layer {
        margin-left : 100px ;
        margin-top : 100px ;
        height : 0% ;
        width : 0% ;
}

That's the whole effect. It remains only to check its availability in your browser. I hope you will be able to apply this effect in their works. Thank you for your attention.