CSS3 Animated Hover Effect For Images

Are you tired of that dull boring images on your blog? Why don't you give CSS3 transition effect a try?
Transition effect is one of the new CSS3 features which allow web developer to create a hover effect between two element. You can't imagine how effective transition effect is, and how site visitors get attracted to it, until you test them out and watch lots of  buzz from people asking you for a way of doing that.

In this tutorial, we will be discussing on how you can apply a simple white transparent background which will flash through your blog image's on hover within a specified time.

The HTML Markup

We will be using two div tag, the first div wraps the main image we want to apply the shine effect to, while the second div wraps the shine effect tag.

<div class="image-shine">
    <img src="IMAGE-URL" />
    <div class="hover-shine"></div>
</div>

The CSS Markup

Now, we will create CSS for the shine effect. In which the width and height must be placed at 100% and the effect will start from the top right corner of the image.

.image-shine{
    width:  250px;
    height: 250px;
    position: relative;
}
.hover-shine{
    width:100%; height: 100%;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPCqGWx5PVFTcAj63lwx9ZdXOx-c_uWzVEsHIQ0ewniQV0LGU4kwafWhjpzD2xefuBQKErnTQwsox5mw1MCPc7zV-UEYn1UiYRHbqCzMKOVe3mt1gfl-vhO6c8nVYe15Mz9OGXCbbi0kQU/s1600/shine.png);
    position: absolute;
    /*Posicion inicial del shine*/
    background-position: -260px 0;
    left:0px; top:0px;
    background-repeat:no-repeat;
}

We specify -260px for the shine background position to the left, so as to prevent it from appearing on the main image before the hover.

The transition effect works upon three values. The first is the element that the transition is applied to, that in our case will be background-position; the second parameter that receives the transition effect is the time taken for the shine background to shine through the main image in seconds, and the third parameter is the transition type that can be: linear, bounce, ease, ease-in, ease-out, ease in-out.

    -webkit-transition: background-position .4s ease;
       -moz-transition: background-position .4s ease;
         -o-transition: background-position .4s ease;
            transition: background-position .4s ease;

Now, we specify the shine background position after placing the cursor on the image (hover), but will return to its initial position (-260px) after removing the cursor.

.hover_shine:hover{
    background-position: 250px 0;
}

Putting Them All Together

I think you should now understand how the transition effect is been formed? Putting all the code together, the final code will look as follow:

<style>

.image-shine{
    width:  250px;
    height: 250px;
    position: relative;
}
.hover-shine{
    width:100%; height: 100%;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPCqGWx5PVFTcAj63lwx9ZdXOx-c_uWzVEsHIQ0ewniQV0LGU4kwafWhjpzD2xefuBQKErnTQwsox5mw1MCPc7zV-UEYn1UiYRHbqCzMKOVe3mt1gfl-vhO6c8nVYe15Mz9OGXCbbi0kQU/s1600/shine.png);
    position: absolute;
    /*Posicion inicial del shine*/
    background-position: -260px 0;
    left:0px; top:0px;
    background-repeat:no-repeat;
    -webkit-transition: background-position .4s ease;
       -moz-transition: background-position .4s ease;
         -o-transition: background-position .4s ease;
            transition: background-position .4s ease;
}
.hover-shine:hover{
    background-position: 250px 0;
}

</style>

<div class="image-shine">
    <img src="IMAGE-URL" />
    <div class="hover-shine"></div>
</div>

Some interesting tutorials you might like:

• Add CSS3 Transition Effect To Drop Down Menu
• Add Zoom Effect To Your Blog Images On Mouse Hover
• How To Add Spinning Or Rotating Effect To Your Blog Images

Hope you like this new transition effect? Talk to you soon pals. Peace!

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz