How to Zoom a Background Image on a Div with Background-Size

how do I zoom a background image on a div with background-size

Answer for those who wants to hack CSS transitioning zooming to get applied on background-size: cover;


-- if not, than read the second section for standard ways to achieve such effect

<div class="wrap">
    <div></div>
    <p>hello</p>
</div>

html, body {
    height: 100%;
}

div.wrap {
    height: 33%;
    width: 33%;
    overflow: hidden;
    position: relative;
}

div.wrap > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.wrap:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

Demo (Using background-size: cover; to transition/zoom the element)

As you said that transitioning the cover size is necessary, so I came up with the trick which I had told you previously, here I have a child element nested under position: relative; element where am having the child element set to position: absolute; with background-image having background-size set to cover and then on hover of parent, I zoom in the element using the transform: scale(2,2); property.

Also, a crucial thing while working with this solution is that we need to set the z-index of the position: absolute; element lower than what the elements you will be placing inside, so it will act like a background

---

Answer for those who want to go clean with HTML and CSS

You cannot animate a background-size if it's value is cover so either you will need px or %, or you can also use an img tag with transform: scale(2,2); property.

Demo

Demo 2 (zoom-in or zoom-out from the center)

div {
    height: 200px;
    width: 200px;
    background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    background-size: 100% 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div:hover {
    background-size: 150% 150%;
}

---

If you want to stick with background-size: cover; than you will have to wrap entire element inside a wrapper element having fixed dimensions with overflow: hidden; and than scale the child element on hover of parent element.

---

As you commented, for an img tag example, you can use transform: scale(2,2); to achieve that with the parent element set to overflow: hidden;

Demo 2

div {
    height:300px;
    width: 300px;
    overflow: hidden;
}

div img {
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}

div:hover img {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
}

Animate background-size: zoom to background-size: 110%

As you have realised you can not animate from cover to any other value.

You could fake the effect with a scaled pseudo element:

.block-service {  height: 800px;  color: #fff;  opacity: 1;  position: relative;  overflow: hidden;}
.block-service:before {  content: "";  background-image: url('http://placehold.it/400x400');  background-size: cover;  background-position: center;  -o-transition: .5s;  -ms-transition: .5s;  -moz-transition: .5s;  -webkit-transition: .5s;  transition: all .5s ease;  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  z-index: -1;}
.block-service:hover:before {  transform: scale(1.2);  opacity: 0.8;  cursor: pointer;}

<div class="desktop-signs">  <div class="image-box">    <div class="col-md-4 block-service" id="block-illustration">      <h2>ILLUSTRATION & ANIMATION</h2>    </div>  </div>  <div class="image-box">    <div class="col-md-4 block-service" id="block-website">      <h2>WEBSITE DEVELOPMENT</h2>    </div>  </div>  <div class="image-box">    <div class="col-md-4 block-service" id="block-game">      <h2>GAME & APP DEVELOPMENT</h2>    </div>  </div></div>

scale background image in div depending on screen size

Okay,

I got it now, the final solution looks like:

.backgnd {
    background: url(img/roneggler.png) no-repeat;
    background-size: contain;
    background-position: right bottom;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

The trick was t use background-size: contain; instead of cover to not get the image to scale up all the way on big screens.

CSS: How to zoom in the background-image only slightly

My suggestion would be to attempt using the 'transform' CSS attribute. You can then give a value of 'scale()' with a number passed into the parentheses. The higher the number, the more the zoomed the image will appear. The good news is that you can use decimals too. This will allow you to zoom the image just a bit at a time. This would look a bit something like this...

#zoom-in {
   background-image: url("https://static.agcanada.com/wp-content/uploads/sites/4/2018/10/wheat-moosomin-sask-09022018-gberg.jpg");
   transform: scale(1.2);
}

You can see an example of this being done here https://css-tricks.com/zooming-background-images/

How to Enable Zoom in Background Image?

The issue is that you are applying the transform property to the parent div. Alternatively, you can modify the background size of the parent div in your zoom keyframe, and adjust the size & positioning from there.

@-webkit-keyframes snow {  0% { background-position: 0px 0px, 0px 0px, 0px 0px }  50% {  }  100% {    background-position: 500px 1000px, 400px 400px, 300px 300px;    ;  }}@-moz-keyframes snow {  0% { background-position: 0px 0px, 0px 0px, 0px 0px }  50% { }  100% {    background-position: 500px 1000px, 400px 400px, 300px 300px;
  }}@-ms-keyframes snow {  0% { background-position: 0px 0px, 0px 0px, 0px 0px }  50% {  }  100% {    background-position: 500px 1000px, 400px 400px, 300px 300px;    ;  }}@keyframes snow {  0% { background-position: 0px 0px; }  50% {  }  100% {    background-position: 5px 1000px;
  }}
div{  width:100%;   height:100vh;  background-image:    url('http://wallpaperlatest.com/wp-content/uploads/3d-live-wallpaper-free-download-1.jpg');  background-size:100% 100%;  background-position: center center;  position:fixed;  top:0;left:0;  width:100%;  height:100vh;  animation: zoom 30s infinite;  text-align:center;}h1{  color:#fff;  font-size:50px;}@keyframes zoom {  0% {     background-size: 100%;   }  50% {     background-size: 150%;   }  100% {    background-size: 100%;   }}

<div>  <h1>OVER TEXT</h1>  <a href="http://wallpaperlatest.com/free-live-wallpapers-download/">Image Souce:</a></div>

Zoom background image only

You have to change in css part and use pesudo elements to get it

Remove background-image in html part and use it in css pesudo element

.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;}

<div id="prod_main">  <div id="product_content">    <li class="prod_img prod_img1" id="prod_img1">      <div class="protransparentbg">        <h4 class="">FIBER FLOOR MAT</h4>      </div>    </li>  </div></div>

---

Related Topics