Search code examples
htmlcss

How do i get these 2 images to expand on hover but come together as one image when not hovered on?


I'm hoping someone can help. I'm still learning how to code and trying to build a portfolio site. I'm after 2 images coming together to create one image and when you hover onto either side it makes the image to go full size. If that makes sense?

I've done the following, which somewhat works but the right hover doesn't display the full image and also the neither images hide the other image on expansion, what am I doing wrong?

Main view how i want it to look before hover Left Side hover but doesn't take up full width Right side hover but doesn't show full image nor take up full width

<div class="main-content">
        <div class="image-section">
          <section id="split-image">
          <img src="./Images/Untitled_Artwork 1.png" id="design-img" />
          </section> 
          <section id="split-image-2">
          <img src="./Images/Untitled_Artwork.png" id="coding-img" />
        </section> 
      </div>
.image-section {
  display: flex;
}
#split-image {
  width: 50%;
  height: 600px;
  object-fit: cover;
  overflow: hidden;
}

#design-img {
  width: 1900px;
  object-fit: cover;
  object-position: 110px -25px;
}

#split-image:hover {
  cursor: pointer;
  width: 100%;
  transition-duration: 2s;
}
#split-image-2 {
  width: 50%;
  height: 600px;
  object-fit: fit;
  overflow: hidden;
}

#coding-img {
  width: 1900px;
  object-fit: cover;
  object-position: -790px -10px;
}

#split-image-2:hover {
  cursor: pointer;
  width: 100%;
  object-fit: cover;
  transition: 2s;
}



Solution

  • I've stacked the two "images" on top of each other by making the first element position:absolute so that it doesn't take up normal space and so then the second image is in the same location. I then use clip-path to not draw parts of each image. I have to juggle the z-index so that the correct one is drawn on top at the correct time.

    img {
      display: none; /* Remove from demo example */
    }
    #split-image { /* For demo, pretend to be the image. */
      background-color:red;
      border: 15px solid blue;
      height: 100px;
      width: 500px;
    }
    #split-image-2 { /* For demo, pretend to be the image. */
      background-color:green;
      border: 15px solid orange;
      height: 100px;
      width: 500px;
    }
    
    #split-image {
      position: absolute;
      z-index: 1;
      clip-path: inset(0 50% 0 0);
      transition: clip-path 0.5s;
    }
    #split-image:hover {
      clip-path: inset(0 0 0 0);
    }
    
    #split-image-2 {
      position: relative;
      z-index: 0;
      clip-path: inset(0 0 0 50%);
      transition: clip-path 0.5s, z-index 0.5s;
      transition-timing-function: ease, step-end;
    }
    #split-image-2:hover {
      z-index: 2;
      clip-path: inset(0 0 0 0);
      transition-timing-function: ease, step-start;
    }
    <div class="main-content">
      <div class="image-section">
        <section id="split-image">
          <img src="./Images/Untitled_Artwork 1.png" id="design-img" />
        </section> 
        <section id="split-image-2">
          <img src="./Images/Untitled_Artwork.png" id="coding-img" />
        </section>
      </div>
    </div>