Resizing an Image to a CSS Grid while Also having an Image Replacement on Hover

Question

Goal: Have a grid that resizes the images to fit it as well as have those images change upon hover

Where I am: I have setup a grid and uploaded the images. Unfortunately, I believe due to me using the position: absolute in order to swap out the images on hover, only one of the images resizes to it's grid. Is there a way around this so that my images will automatically fit into my grid and I can keep my hover effect?

HTML:

<div class="employee-gallery-grid">
  <!-- 1st Image -->
  <div class="image-swap">
  <img src="https://static1.squarespace.com/static/5fbadc5b055c332544664c05/t/5fbae18332611c2ac1bf6ed4/1606082947409/Danielle_Plain.jpg">
  <img src="https://static1.squarespace.com/static/5fbadc5b055c332544664c05/t/5fbae17eeead1a267e694d27/1606082942466/Danielle_Art.jpg
">
  <div>
    Danielle1
  </div>
</div>
  
    <!-- 2nd Image -->
  <div class="image-swap">
  <img src="https://static1.squarespace.com/static/5fbadc5b055c332544664c05/t/5fbae18332611c2ac1bf6ed4/1606082947409/Danielle_Plain.jpg">
  <img src="https://static1.squarespace.com/static/5fbadc5b055c332544664c05/t/5fbae17eeead1a267e694d27/1606082942466/Danielle_Art.jpg
">
  <div>
    Danielle2
  </div>
</div>
</div>

CSS:

.image-swap img:nth-child(1) {
  position: absolute;
  transition: .8s;
} 
.image-swap img:nth-child(1):hover {
    opacity: 0;
}
.employee-gallery-grid{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 20vw;
}
.image-swap > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

Answer 1

So you were on the right track with using position: absolute; but you need to set it to both images and also you need to set the position: relative; to the containing div image-swap which is already ordered in your grid. You can then put the appropriate image on top using z-index here is the working code:

.image-swap img:nth-child(1) {
  transition: .8s;
  z-index: 1;
} 
.image-swap img:nth-child(1):hover {
    opacity: 0;
}
.employee-gallery-grid{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 20vw;
}
.image-swap > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  position: absolute;
}

.image-swap {
  position: relative;
}

<div class="employee-gallery-grid">
  <!-- 1st Image -->
  <div class="image-swap">
  <img src="https://static1.squarespace.com/static/5fbadc5b055c332544664c05/t/5fbae18332611c2ac1bf6ed4/1606082947409/Danielle_Plain.jpg">
  <img src="https://static1.squarespace.com/static/5fbadc5b055c332544664c05/t/5fbae17eeead1a267e694d27/1606082942466/Danielle_Art.jpg
">
  <div>
    Danielle1
  </div>
</div>
  
    <!-- 2nd Image -->
  <div class="image-swap">
  <img src="https://static1.squarespace.com/static/5fbadc5b055c332544664c05/t/5fbae18332611c2ac1bf6ed4/1606082947409/Danielle_Plain.jpg">
  <img src="https://static1.squarespace.com/static/5fbadc5b055c332544664c05/t/5fbae17eeead1a267e694d27/1606082942466/Danielle_Art.jpg
">
  <div>
    Danielle2
  </div>
</div>
</div>