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

Question

I want a div element to stretch across that is 33% width with a background image done in css

background-image:url(); background-size:cover  

How do I animate a zoom-in of the image of the background in the div on mouseover or mouseneter, is there a plugin that can do this? The background div has to use background-size:cover because it's an elastic page.

I don't have a fiddle yet cos I don't know where or how to start

Answer 1

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