css hover scale image code example
Example 1: resize image slowly on hover
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
Example 2: increase the size of an image on hover using css
img {
transition: all .2s ease-in-out;
}
img:hover {
transform: scale(1.5);
}
Example 3: hover reinzoomen css
div.image {
width: 300px;
height: 200px;
overflow: hidden;
}
div.image img {
width: 100%;
height: auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
div.image img:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Example 4: how to enlarge image when hover on in css
img:hover {
transform: scale(1.3);
}