How to prevent image resizing during CSS image transition on hover in grid layout

Question

I want to have an image that transitions to another image when hovered on. I have currently have working code to do this, except that the top image is automatically rescaled to a larger size initially, so when the top image transitions from opaque 1 to 0, the image looks like it has "moved" since it is a different size than the bottom image. I have confirmed that both the top and bottom images are the same dimensions.

My code and issue can be seen in the preview here: https://jsfiddle.net/k3jLxofv/1/

In the "Project Area 1", we can see 2 images loaded initially. 1 image is smaller than the other even though the images are the same (we can see two lines). I do not know why 1 image is larger than the other. I want to be able to hover over "Project Area 1" and have a seamless transition so the result does not look like it was moved.

"Project Area 2" shows size the image should be at both states (when not hovered on and hovered on).

Thank you in advance!

.projects-grid-setup {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  grid-gap: 0.9rem;
  width: 98.3%;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.projects-tile {
  background: black;
}

.projects-tile-picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crossfade {
  position: relative;
}

.crossfade img.fade {
  position: absolute;
  left: 0;
  opacity: 1;
  transition: opacity 0.55s ease-in-out;
}

.crossfade img.top:hover {
  opacity: 0;
}

<div class="projects-grid-setup">
  <!--Project Start-->
  <a class="projects-tile" href="google.com" target="_blank">
    <div class="crossfade">
      <img class="projects-tile-picture top fade" src="https://picsum.photos/300/200?1" />
      <img class="projects-tile-picture" src="https://picsum.photos/300/200?1" />
    </div>
    <p class="projects-tile-title">
      Project Area 1
    </p>
  </a>
</div>

@OriDrori you removed half of his HTML code and you used your own images that are equal in size so the snippet doesn't reproduce any issue — Temani Afif, Nov 12 '19 at 13:16
The 2nd part of the code wasn't relevant to the problem, and the problem is still there - it's a tiny jump while it fades. It's easier to see, when image are identical. — Ori Drori, Nov 12 '19 at 13:18
@TemaniAfif - check the [fiddle](https://jsfiddle.net/bko3gxs6/) to see what I mean — Ori Drori, Nov 12 '19 at 13:21
@OriDrori if this is the issue then it's a duplicate of : https://stackoverflow.com/q/5804256/8620333 — Temani Afif, Nov 12 '19 at 13:23
@OriDrori thanks for looking into it. issue still isnt solved though :( — fawneej, Nov 12 '19 at 20:25

score 0 · Accepted Answer · answered Nov 12 '19 at 13:48

0

Keep height auto as mentioned below and try

.projects-tile-picture {
  width: 100%;
  height: auto;
  object-fit: cover;
}

answered Nov 12 '19 at 13:48

dilip

56
3

score 0 · Answer 2 · answered Nov 12 '19 at 21:50

Change the display type of .projects-tile-picture to block to prevent the extra space on the bottom. The extract space doesn't effect the static image (before the hover), but makes the absolute positioned image slightly larger (height: 100%).

.projects-grid-setup {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  grid-gap: 0.9rem;
  width: 98.3%;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.projects-tile {
  background: black;
}

.projects-tile-picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crossfade {
  position: relative;
}

.crossfade img.fade {
  position: absolute;
  left: 0;
  opacity: 1;
  transition: opacity 0.55s ease-in-out;
}

.crossfade img.top:hover {
  opacity: 0;
}

<div class="projects-grid-setup">
  <!--Project Start-->
  <a class="projects-tile" href="google.com" target="_blank">
    <div class="crossfade">
      <img class="projects-tile-picture top fade" src="https://picsum.photos/300/200?1" />
      <img class="projects-tile-picture" src="https://picsum.photos/300/200?2" />
    </div>
    <p class="projects-tile-title">
      Project Area 1
    </p>
  </a>
</div>

How to prevent image resizing during CSS image transition on hover in grid layout

2 Answers2