Geek Answers Handbook

Hover transition background size causes chrome to “shake” background image

I am trying to achieve the effect that I saw recently when background images are scaled on hover. I pretty much did this with an example here: https://jsfiddle.net/qyh6nbwt/ , but it seems to be very shaky (you will understand what I mean by hanging over it), I am osx working with the latest version chrome, I have not tested it in other browsers yet. Is there a way to make it smoother, so it doesn't “shake” when scaling?

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; }
+5
source share
3 answers

just use transformation, scale.

so instead of setting the bg image to 160% use

 transform:scale(1.5);

You can find some information about the transform css property here.

in order to use the conversion scale in your case, you need an overflow wrapper so that only the inner div gets bigger and is cut out by the outer div.

see updated fiddle.

greetings timmi

+2
source

Used conversion scale instead of switching to background resizing: https://jsfiddle.net/qyh6nbwt/

 transform: scale(2, 2);
+1
source

So, I did this mission to understand this, it turned out that it was not as easy as I thought.

This is a bit dirty, but you need to create your div within the div as follows:

 <div class="example"> <div></div> <p>test</p> </div>

Then from here you can fine-tune the scaling targeting, for example:

 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 scale and speed using the scale and transition properties.

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

+1
source

More articles:


All Articles