[Solved] How to combine 3 images in html/javascript

by


You could use something like this if you wanted something in pure CSS. It’s a very rudimentary example but should get you started. It uses CSS clip-path on the image elements and transition to modify the clipping on hover.

#img-wrap {
  width: 300px;
  height: 300px;
  position: relative;
}

#img-wrap img {
  clip-path: inset(0 66% 0 0);
  position: absolute;
  z-index: 0;
  transition: all .2s ease .2s;
}

#img-wrap img:nth-of-type(2) { left: 33%; }
#img-wrap img:nth-of-type(3) { left: 66%; }

#img-wrap img:hover {
  clip-path: inset(0 50% 0 0);
  z-index: 10;
}

#img-wrap img:nth-of-type(3):hover {
  left: 50%;
}
<div id="img-wrap">
  <img src="http://placehold.it/300x300/39b54a/ffffff/">
  <img src="http://placehold.it/300x300/f78200/ffffff/">
  <img src="http://placehold.it/300x300/e6001f/ffffff/">
</div>

1

solved How to combine 3 images in html/javascript