How to combine 3 images in html/javascript

Question

I have 3 <img>.

<img id="img1" src="" alt="">
<img id="img2" src="" alt="">
<img id="img3" src="" alt="">

I want to show all 3 three of them simultaneously in one <div> but each image takes 1/3 of the <div> width (also the images should be cropped). And whenever I hover a image the column should expand a little and reveal more of the image.

I thought of putting them together in a <canvas>and use WebGL but then I think I dont have the possibility to implement hover events. Any Ideas?

Normal CSS should be able to show the [portion of the images](https://stackoverflow.com/questions/57725/how-can-i-display-just-a-portion-of-an-image-in-html-css/23220895#23220895) you want, I would use JQuery for the hover animation. — KIKO Software, Dec 27 '17 at 12:16
[Here](https://jsfiddle.net/xh8qwxzw/) is an example in Bootstrap 3, without flex. — Miquel Al. Vicens, Dec 27 '17 at 12:22
Normal CSS should even be able to handle the hovering events and expand the correct image (with clip-path probably). Also, don't use jquery, no need to pull in dependencies unnecessarily. — C14L, Dec 27 '17 at 13:58
This is not what i am looking for. I will update the question. But I accepted the answer already since downvotes. — greedsin, Dec 27 '17 at 14:32

dom_ahdigital · Accepted Answer · 2017-12-27T14:08:00.223

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>

while this is correct and I accepted it , the number of images is not fixed at three. That is why I considered this a problem(also the images are cropped to a polygon). If the number would be fixed to three then this is the correct solution! — greedsin, Dec 27 '17 at 14:31

How to combine 3 images in html/javascript

1 Answers1