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 to be very shaky (you will understand what I mean by hovering over it), I'm on osx running latest chrome version, have not checked it in other browsers yet. Is there a way to make it smoother, so it doesn't "shake" on zoom in?
HTML
<div id="example"> test </div>
CSS
#example { background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg); background-position: center center; width: 250px; height: 250px; transition:all 1000ms ease; background-size: 100% auto; } #example:hover { background-size: 160% auto; }
just use transform, scale.
so just instead of setting the bg image to 160% use
transform:scale(1.5);
some information about the transform css property you can find here
to use the transform scale in your case you will need a wrapper with overflow hidden so just the inner div gets bigger and cut of by the outer div.
see updated fiddle.
greetings timmi
Used transform scale instead of a background-size change transition: https://jsfiddle.net/qyh6nbwt/
transform: scale(2, 2);
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:
<div class="example"> <div></div> <p>test</p> </div>
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.
