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)