Hover Zoom Effect While Using Object-Fit: Cover

Question

My goal is to have a zoom in effect when a user hovers over an image on my page. I have found code that has this effect;

.transition {
    -webkit-transform: scale(1.6); 
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
}
#content {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}

Adding the transition to the content when the user hovers over the image.

The problem that I am having is using this technique combined with object-fit: cover. I want the image to fit into a fixed size box (Height: 250px; Width: 25%), while maintaining its aspect ratio (which is accomplished using object-fit: cover).

But, when a user hovers over an image with object-fit: cover, it reverts back to its old aspect ratio, does the zoom, and then goes back to the proper aspect ratio. This leads to some very odd visuals, which can be seen in the following fiddle;

http://jsfiddle.net/y4yAP/982/

Removing the object-fit: cover on #content will fix the problem with the zoom, but distort the aspect ratio.

Any idea how to fix this?

Answer 1

object-fit:cover isn't widely supported and I'm not very familiar with it, I don't know if you are required to use it but I tried something I am more familiar with.

If all the images are 'landscape' then you can use width: 100% and height: auto and the CSS will maintain the aspect ratio for you. To position the images centered in the container I applied position: relative to the container and position: absolute to #content. See: https://css-tricks.com/almanac/properties/p/position/

For the zoom you can just use #content:hover { ... } in your CSS (unless you need jQuery for other purposes).

HTML:

<div id="imageDiv">
    <img id="content" src="http://upload.wikimedia.org/wikipedia/en/7/78/Small_scream.png" />
</div>

CSS:

#content:hover {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.6); 
    -moz-transform: translateX(-50%) translateY(-50%) scale(1.6);
    -o-transform: translateX(-50%) translateY(-50%) scale(1.6);
    transform: translateX(-50%) translateY(-50%) scale(1.6);
}

#content {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
}

#content {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#imageDiv { 
    position: relative;
    height: 250px;
    width: 450px;
    overflow: hidden;
}

FIDDLE (sans js): http://jsfiddle.net/pqs4vef7/2/

Answer 2

Please check all you need to do is the the width to "max-width", and remove the object-fit:

www.jsfiddle.net/y4yAP/985/