hover zoom background image css code example
Example 1: zoom background image css
.prod_img {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
height: 580px;
width: 300px;
position: relative;
}
.prod_img:before {
content: ' ';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url(http://images.all-free-download.com/images/graphicthumb/beautiful_landscape_picture_02_hd_pictures_166284.jpg);
background-size: cover;
background-position: center center;
"
}
.protransparentbg {
position: absolute;
left: 20px;
background: rgba(51, 51, 51, .8);
}
.prod_img:hover:before {
webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
-o-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
Example 2: zoom background image css
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 400px;
height: 300px;
}
.child {
width: 100%;
height: 100%;
background-color: black;
background-image: url("images/city.jpg");
background-position: center;
background-size: cover;
}
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
}
transition: all .5s;
.child::before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(52, 73, 94, 0.75);
}
.parent:hover .child:before,
.parent:focus .child:before {
display: block;
}
<div class="parent">
<div class="child">
<span>Hello</span>
</div>
</div>
We can give our <span> some style:
span {
color: white;
font-family: sans-serif;
padding: 25%;
position: absolute;
}
.parent:hover span,
.parent:focus span {
display: block;
}