background-size transition on hover causes chrome to “shake” background image

Question

I am trying to achieve an effect I saw recently, where background image zooms on hover. I pretty much did it with example here: https://jsfiddle.net/qyh6nbwt/ but it seems t

Answer 1

So I made this my mission to figure this out, turns out it wasn't quite as simple of a fix as I thought.

It's a little dirty, but you need to frame your div within a div like this:

    

    
test

Then from here, you can target the zooms more accurately, like this:

div.example {
    height: 250px;
    width: 250px;
    overflow: hidden;
    position: relative;
}

div.example > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

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

You can adjust the zoom and speed using the scale and transition properties.

Here is a working fiddle to demonstrate. Hope this helps, I checked in Chrome/Safari/Firefox and it seems to work pretty well.