make image bigger when hover code example
Example 1: 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 2: 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);
}