I want to make zoom effect when user hover link (div) with image background.
I don't know how to do it when i want to zoom only background not text! And i cant find the best way.
Here is a code (doesn't work as i want):
.light_blue {
display: block;
color: #fff;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
}
a.light_blue:hover {
text-decoration: none;
color: #fcb428;
}
div.wrap {
height: 33%;
width: 33%;
overflow: hidden;
position: relative;
}
.wrap {
-moz-transition: all .5s;
-webkit-transition: all .8s;
transition: all .8s;
background-position: center center;
}
.wrap:hover {
-webkit-background-size: 120%;
-moz-background-size: 120%;
-o-background-size: 120%;
background-size: 120%;
}
.bg_flat {
position: absolute;
font-family: "Archivo Narrow";
background: url(http://hokejfan.pl/hokej2015/kluby/img/black_bg4.png);
background-size: contain;
bottom: 0px;
padding: 5px;
}
.bg_naglowek {
text-transform: uppercase;
font-size: 29px;
}
.bg_flat2 {
position: absolute;
background: url(../img/black_bg4.png);
background-size: contain;
font-family: "Archivo Narrow";
bottom: 5px;
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);
padding: 15px;
}
<div class="col-sm-4" style="padding: 5px;">
<a href="#news" class="light_blue wrap" style="background-image: url('http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg'); height: 180px;">
<div class="bg_flat2">
<b class="bg_naglowek">Hello World</b>
</div>
</a>
</div>
One way to do this is to create a parent element with overflow set to hidden, and inside of the parent create a child element with width and height set to 100% and has the image set as its background. When the user then hovers over this child element, we use transform: scale() to enlarge it.
Zoom Rooms background image requirementsMinimum dimension: 960px. Maximum dimension: 1920px. Recommended dimensions: 1920px by 1080px (16:9 aspect ratio). If you don't use an image with an aspect ratio of 16:9, you may see black bars beside the background image.
Answer: Use the CSS background-image property You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
background-size:cover; means the background image will always fit the whole div , you won't be left with any empty spots in your div background-size:100% 100% won't leave any empty space too, but of course this will detroy the original image aspect ratio.
You can't smoothly animate the background-size
property if it's set to cover
. But you can fake it by animating transform
instead. And since you only want the image scaled, not the contents, you'll need a child element dedicated to displaying the image (done with a pseudo-element in the example below).
.wrap {
width: 33%;
padding-bottom: 20%;
overflow: hidden;
position: relative;
transition: all .8s;
background: url(http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg);
background-position: center center;
background-size: cover;
}
.wrap::before {
content:"";
position:absolute; top:0;right:0;bottom:0;left:0;
background:inherit;
transition:inherit;
}
.wrap:hover::before {
transform: scale(1.2);
}
.content {
position: relative;
}
<div class="wrap">
<div class="content">Content</div>
</div>
To animate the background-size
property, you need to set it for the normal and the hover state. Then transition
will work.
.light_blue {
display: block;
color: #fff;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
}
a.light_blue:hover {
text-decoration: none;
color: #fcb428;
}
div.wrap {
height: 33%;
width: 33%;
overflow: hidden;
position: relative;
}
.wrap {
-moz-transition: all .5s;
-webkit-transition: all .8s;
transition: all .8s;
background-position: center center;
background-size: 100%;
}
.wrap:hover {
-webkit-background-size: 120%;
-moz-background-size: 120%;
-o-background-size: 120%;
background-size: 120%;
}
.bg_flat {
position: absolute;
font-family: "Archivo Narrow";
background: url(http://hokejfan.pl/hokej2015/kluby/img/black_bg4.png);
background-size: contain;
bottom: 0px;
padding: 5px;
}
.bg_naglowek {
text-transform: uppercase;
font-size: 29px;
}
.bg_flat2 {
position: absolute;
background: url(../img/black_bg4.png);
background-size: contain;
font-family: "Archivo Narrow";
bottom: 5px;
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);
padding: 15px;
}
<div class="col-sm-4" style="padding: 5px;">
<a href="#news" class="light_blue wrap" style="background-image: url('http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg'); height: 180px;">
<div class="bg_flat2">
<b class="bg_naglowek">Hello World</b>
</div>
</a>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With