如何在 html/javascript 中组合 3 个图像

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?

Answer 1

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>