CSS: problems when using object snap and transform together on webkit

Question

I am trying to use the css object-fit: cover property in an img element so that my image fills it containing div and transform: scale(xx) so that the image is scaled down on hover.

Here is an example script: https://jsfiddle.net/96kbuncq/
Edit: sample with real images: https://jsfiddle.net/96kbuncq/3/

HTML:

 <div> <div class="category"> <img src="http://placehold.it/1200x950&text=1200x950+-+Category+1+-" /> </div> <div class="category"> <img src="http://placehold.it/1200x950&text=1200x950+-+Category+2+-" /> </div> <div class="category"> <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" /> </div> </div> 

CSS

 ..... div.category img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center; } /* Transformations */ div.category img { transition: transform 0.35s; transform: /*translateZ(0)*/ scale(1.12); } div.category:hover img { transform: /*translateZ(0)*/ scale(1); } 

This works fine in Firefox, but in Chrome and Opera I have the following problems:

• When you hover the first div , others influence it (and when you hover the second, it affects the third),
• When a div falls, the image inside is fully displayed completely (we can see that the whole image is stretched according to the div ) before properly scaling and “covering” the div .

I do not know how to solve these problems.

About the first issue (affected siblings), I found other answers saying to use translateZ(0) , but when I add this, object-fit: cover no longer works (the whole image is stretched to fit inside the div ).

Any ideas how to make this work in Chrome? (Both object-fit and transform work as expected when used without the other.)

Answer 1

After testing, it seems that the backface-visibility , translateZ and translate3d , which are necessary to prevent the conversion from flickering, break object-fit and background-size . If your goal is to center the image, you can use position: absolute and translate , as in the example below.

 div.category { width: 80%; height: 150px; margin: 20px; position: relative; overflow: hidden; } img { display: block; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.12); /* order is important here*/ backface-visibility: hidden; transition: transform 0.35s; } div.category:hover img { transform: translate(-50%, -50%) scale(1); } 

 <div> <div class="category"> <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" /> </div> <div class="category"> <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" /> </div> <div class="category"> <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" /> </div> </div> 

http://jsfiddle.net/moogs/r1s1rtLk/4/

Answer 2

You can create an additional layer with a class transfer and use it to create a scaling effect.

Your styles are the same, but redesigned

 html, body { width: 100%; height: 100% } div.category { width: 80%; height: 150px; background-color: yellow; margin: 20px; overflow: hidden; position: relative; } .wrap { position: absolute; height: 100%; width: 100%; } div.category .wrap img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center; } /* Transformations */ div.category .wrap { transition: transform 0.35s; transform: scale(1.12); } div.category:hover .wrap { transform: scale(1); } 

 <div> <div class="category"> <div class="wrap"> <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" /> </div> </div> <div class="category"> <div class="wrap"> <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" /> </div> </div> <div class="category"> <div class="wrap"> <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" /> </div> </div> </div>