css increase image size on hover 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: how to enlarge image wen hover
Enter the following block of code into the Custom CSS field in your job
.thumbnail:hover {
position:relative;
top:-25px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
}
in the HTML Add the attribute, class="thumbnail" to each image element
that you would like to enlarge on hover so that the element looks something like this
<img src="[your hosted image URL]" class="thumbnail" height="100" width="100" />
Example 4: how to enlarge image when hover on in css
img:hover {
transform: scale(1.3);
}