Wordpress gallery change images on mouse over - css

Question

Hi I have to show a grid of images; every item in the grid is a different product and it has 2-3 images but only the first image should be visible. On mouse hover should loop the other images. How can I do this in wordpress?
I thought to insert a gallery for every product and from css display only the first child and display:none all the other images. But now I don't know how to add slide on mouse over.
Any other solution?
thank you

Answer 1

According to the provided snippet, this is the CSS that should do the job.
In your sample, I just added a wrapper div, that will be our viewport (meaning the container that will just display one image at a time).
I also removed all the br that clear the float, as the CSS uses the float to display all images side by side for the slide.
<div id="viewport">
<div id="gallery-1" class="gallery galleryid-20 gallery-columns-1 gallery-size-collection">
<dl class="gallery-item">
<dt class="gallery-icon portrait">
<a data-lightbox-gallery="lightbox-gallery-1" href="image1.jpg" data-rel="lightbox-gallery-1">
<img id="image1" style="border: medium none;" class="attachment-collection" alt="image1" height="420" width="300">
</a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon portrait">
<a data-lightbox-gallery="lightbox-gallery-1" href="image2.jpg" data-rel="lightbox-gallery-1">
<img id="image2" style="border: medium none;" class="attachment-collection" alt="image2" height="420" width="300">
</a>
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon portrait">
<a data-lightbox-gallery="lightbox-gallery-1" href="image3.jpg" data-rel="lightbox-gallery-1">
<img id="image3" style="border: medium none;" class="attachment-collection" alt="image3" height="420" width="300">
</a>
</dt>
</dl>
</div>
</div>
Note that I added some ids for all images just to have different colors through the CSS
Now, related to the CSS part:
/* THIS IS JUST FOR STYLING FAKE IMAGES, NOT PART OF THE SOLUTION */
#image1{background-color: red;}
#image2{background-color: green;}
#image3{background-color: blue;}
#viewport{width: 300px; overflow: hidden;}
#gallery-1{width: 900px; height: 420px; white-space: nowrap;}
#gallery-1 dl{float: left; margin: 0;}
/* ON HOVER, JUST TRIGGER ANIMATION WITH KEY FRAME TO PERFORM SLIDE AND PAUSE */
#viewport:hover #gallery-1{
-webkit-animation-name: slide;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: infinite;
}
/* ANIMATION ON 4S, PERCENTAGE OF THE ANIMATION HAS SAME VALUES TO MIMIC PAUSE ON ONE IMAGE */
#-webkit-keyframes slide
{
0% { transform: translateX(0); }
15% { transform: translateX(-300px); }
35% { transform: translateX(-300px); }
50% { transform: translateX(-600px); }
70% { transform: translateX(-600px); }
85% { transform: translateX(0); }
100% { transform: translateX(0); }
}