29

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

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
ONYX
  • 5,679
  • 15
  • 83
  • 146

2 Answers2

59

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);
}
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • How do then have the img tag overflow it parent div element so I can accomplish the zoom in look cos the img wont stretch to it's full width in the it's parent div. Can you make me a jsFiddle example on how to do this – ONYX Jan 23 '14 at 06:18
  • Thanks for example. The problem I have now is that the background-image stretches because the div element is set at 33% and not a fixed width so what can you do change it so it stays in proportion. – ONYX Jan 23 '14 at 06:27
  • Thanks heaps for you're answers I will give you're official answer a go and see if I cn get it to work. I The only problem I'm having is the animation on IE11 when it scales the transform it just jerks into the transform know of any tricks to fix that – ONYX Jan 23 '14 at 06:39
  • @KDM Try `zoom` but chrome will make it 2x larger :) – Mr. Alien Jan 23 '14 at 06:40
  • Good set of answers, I came here to confirm I couldn't animate with cover, was hoping to not add an extra div, oh well. – Matthew Nie Mar 25 '15 at 14:45
  • Transition on all properties? Very bad practise. – Matt W Dec 08 '15 at 19:37
  • @M_Willett What's bad in that? – Mr. Alien Dec 10 '15 at 19:40
-3
<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.

Demo Here

Vicky Gonsalves
  • 11,593
  • 2
  • 37
  • 58
  • 2
    Do you really use this method in your own projects? background-size set to `cover` means clearly that ones needs to respect time image's aspect ratio. Suggesting something like *Just use 200%* is quite odd at least. – Roko C. Buljan Sep 12 '16 at 20:05