Create GIF hover on individual images within a summary block using CSS

I have added a summary block of images to my website. Upon hover/rollover, I would like each individual image to have its own animated gif that plays.

I know how to add custom CSS to an entire block, but am having a hard time finding code to allow me to edit each hover image  individually within the Summary Block.

Thank you so much!

Add to Design > Custom CSS

#block-id {
.summary-item:nth-child(1):hover img {
	content: url(https://cdn.pixabay.com/photo/2022/03/06/05/30/clouds-7050884__480.jpg);
}
.summary-item:nth-child(2):hover img {
	content: url(https://cdn.pixabay.com/photo/2022/02/15/00/40/lemonade-7014122__340.jpg);
}
.summary-item:nth-child(3):hover img {
	content: url(https://cdn.pixabay.com/photo/2022/03/01/20/58/peace-genius-7042013__340.jpg);
}}

If it doesn't work, Can you share link to page where you added summary? We can give the code to achieve this.