CODEWITHSUNDEEP
htmlcsscss-transitionscss-transforms
Max
Max

Reputation: 33

HTML/CSS - Images overlapping each other only on one side with transform

while i was creating a website i stepped into something unexpected.

https://jsfiddle.net/m9qgxeke/3/

As you can see after an image has expanded it returns to it's original size, but the div after jumps over it. I tried everything i could think of, but nothing worked. Is there a way to prevent this to happen?

HTML

<div class="img-gr transition">
    <img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 1">
</div>
<div class="img-gr transition">
    <img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 2">
</div>
<div class="img-gr transition">
    <img src="http://lorempixel.com/400/200/city" alt="Placeholder image" class="img-responsive" title="Lavoro 3">
</div>

CSS

.transition img {
    display: block;
    transition: transform .2s ease;
    -moz-transition: transform .2s ease;
    -webkit-transition: transform .2s ease;
    -ms-transition: transform .2s ease;
    -o-transition: transform .2s ease;
    position: relative;
    z-index: 2;
}
.transition img:hover, .transition img:active {
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    z-index: 10;
}

Upvotes: 3

Views: 744

Answers (2)

Johannes Reuter
Johannes Reuter

Reputation: 3547

This works for me in Chrome: https://jsfiddle.net/m9qgxeke/8/

The trick is to make a transition on the z-index-property that starts after the 0.2 seconds (when the image is back in place):

transition: transform .2s ease, z-index 0.2s 0.2s;

But this would apply to the "in-transition" (smaller image to bigger image) as well, which we don't want, so we have to disable the z-index-transition for the "in-transition" with the active-pseudo-selector:

.transition img:active { transition: transform .2s ease, z-index 0s; }

Code is shortened for clarity.

Edit: bumpys solution is much more simple and recommendable, my approach also works for position: relative-elements, in case this is an requirement (which I don't suspect for simple images).

Upvotes: 1

bumpy
bumpy

Reputation: 2002

Simply remove the position: relative; from .transition img

Upvotes: 3

Related Questions