3 images to change on hover

Hello everyone, does anyone know what's the code to add 3 images in code block? Images should change on hover. 

Thank you,
K

3 images, hover on each images, it will change to another image?

@tuanphan Yes, the idea is I have a 1 main image, when I hover over the main image, 2 additional images shall appear. So that I have 3 images to show in total. Please, do you think it is possible?

I think you need to use JavaScript. Do you use Personal or Business Plan?

@tuanphan I have commerce, you think that could work?

<img src="https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg" width="200px" class="img1"/>
<div class="img2">
  <img src="https://beaverhero.com/wp-content/uploads/2019/08/momentum-squarespace.jpg"/>
  <img src="https://beaverhero.com/wp-content/uploads/2019/07/pedro-demo-squarespace-com-1689x1080-500w.jpg"/>
</div>
<style>
  /* hide 2 images */
  .img2 {
  	display: none;
  }
  /* show 2 images on image 1 hover */
  .img1:hover + .img2 {
  	display: block;
  }
</style>

Try add to Code Block

@tuanphan I am always grateful for your help. The code worked, however, may I just request a small tweak. How do we make the images appear on the same place when hovered? What I want to achieve is: when you hover on the hero image, other two shots will appear one the same frame.

Thank you for your patience 😆

3 images on same row??

Yes please @tuanphan 

2 hours ago, Ptphotography said:

Yes please @tuanphan 

Can you share link to page where you inserted above code? We can check easier.