Header Ads

  • Breaking News

    CSS3 Animated Hover Effect For Images



    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(http://4.bp.blogspot.com/-33qEOAK6J1E/UknXiuquI4I/AAAAAAAAEhA/ v50bvnMQ3T0/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(http://4.bp.blogspot.com/-33qEOAK6J1E/UknXiuquI4I/AAAAAAAAEhA /v50bvnMQ3T0/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>




    No comments

    Post Top Ad

    Post Bottom Ad