Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Image Zoom Effect Using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 146
    Comment on it

    Hello,readers as we all visit various websites we mostly get attractive towards those websites comprising with various animation effects in it.So here in my example i have tried to give zooming effect to the images using CSS3 properties such as transition and transform on hover.

    In my example , I have tried to zoom the image using transform scale(2) property.Basically the scale method is used to alter the size of the elements. In it I have used scale(2) ,so that we can double the size of the images used.We can aslo give the scale method to the coordinates so that the image can be extended vertically and horizontally.

    Below is the code in html:-

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    
    <meta content="width=device-width, initial-scale=1" name="viewport">
    
    <title>Image Zoom Effect using CSS3</title>
    
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    
    <body>
    
    <!-- =container start= -->
    
    <div class="container">
    
    <!-- =title row start= -->
    
    <div class="row">
    
    <!-- =title col start-= -->
    
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title text-center">
    
    <h1>Image Zoom Effect Using CSS3</h1>
    
    </div><!-- =title row end// -->
    
    </div><!-- =title col end// -->
    
    <!-- =Section block row start= -->
    
    <div class="row">
    
    <!-- =section block col start= -->
    
    
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 section-block">
    
    <img class="img-box" src="images/1.jpg">
    
    <img class="img-box" src="images/2.jpg">
    
    <img class="img-box" src="images/3.jpg">
    
    <img class="img-box" src="images/4.jpg">
    
    <img class="img-box" src="images/5.jpg">
    
    <img class="img-box" src="images/6.jpg">
    
    <img class="img-box" src="images/7.jpg">
    
    <img class="img-box" src="images/8.jpg">
    
    <img class="img-box" src="images/9.jpg">
    
    </div><!-- =Section-block row end//-->
    
    </div><!-- =section-block col end// -->
    
    </div><!-- = conatiner end// -->
    
    </body>
    
    </html>

    Below is the CSS code:-

    .title{
    
    margin-bottom: 45px;
    
    margin-top: 31px;
    
    }
    
    h1{
    
    font-size: 45px;
    
    font-weight: 600;
    
    }
    
    img{
    
    margin-bottom: 10px;
    
    }
    
    .img-box{
    
    width: 200px;
    
    height:200px;
    
    -webkit-transition: all .3s ease-out;
    
    -moz-transition: all .3s ease-out;
    
    -o-transition: all .3s ease-out;
    
    transition: all .3s ease-out;
    
    }
    
    .img-box:hover {
    
    -moz-transform: scale(2);
    
    -webkit-transform: scale(2);
    
    -o-transform: scale(2);
    
    -ms-transform: scale(2);
    
    transform: scale(2);
    
    }

    In the CSS , I have given transition property to the img-box and on hover transform property to the img-box.

    Conclusion:-

    Hence, the zoom effect is achieved on the image using CSS3 properties such as transform and transition.

    Note:-The following example will run on the latest version browsers efficiently such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .

 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: