Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS image zoom effect

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 272
    Comment on it

    Hey Readers,

    This is a fun image zooming effect. Zooming an image gives a closer look to it.  Zoom effect can be achieved with CSS too. To zoom an image, we first specify the dimensions of the original image (optional) and then give the dimensions it should attain in a zoom position. The 'transition' property helps to achieve this. The property is used differently in different browsers. The zoom time and linear is given.  The zoom image needs to have position 'absolute'.

     

    Here is the sample code. You can make changes with different images to obtain different zooming effects.

    HTML :

    <a href="#">
    <img class="css_zoom_image" src="https://s-media-cache-ak0.pinimg.com/564x/9b/a2/57/9ba25796112cad616be27e473ae1e149.jpg">
    <img class="img-zoom" src="https://s-media-cache-ak0.pinimg.com/564x/9b/a2/57/9ba25796112cad616be27e473ae1e149.jpg">
    </a>

     

    CSS :

    .css_zoom_image {
       width: 50px;
    }
    .img-zoom {
       position: absolute;
       width: 0px;
       -webkit-transition: width 0.3s linear 0s;
       -moz-transition: width 0.3s linear 0s;
       -ms-transition: width 0.3s linear 0s;
       -o-transition: width 0.3s linear 0s;
       transition: width 0.3s linear 0s;
       z-index: 10;
    }
    .css_zoom_image:hover + .img-zoom {
       width: 200px;
    }
    

     

    Actual image :

    CSS image zoom effect

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: