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 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;
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);}
<script> function animate(){ document.getElementById('a').style.webkitTransitionDuration='1s'; document.getElementById('a').style.backgroundSize="200% 200%"; }</script><div id="a" onmouseover="animate()" style="width: 200px; height: 70px; border: 1px solid; background: url('http://www.wpclipart.com/food/fruit/apple/apples_4/apple_honeycrisp_small.png') no-repeat;background-size: 100% 100%; "></div>You can do something like this for webkit browsers.