Wordpress gallery change images on mouse over

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

Without any code snippet, it is a bit hard to answer here. Why are you referring to Wordpress in your question? Are you using a specific plugin? Basically, the idea is to have a wrapper div (with overflow:hidden as css property), that will contain your 3 images. On mouseover, you'll have to trigger a css keyframe animation. But with a code snippet, you could have a more precise answer — PIIANTOM, Nov 19 '15 at 02:00
This is the snippet of the default gallery that i add in page from wordpress editor https://jsfiddle.net/m0j75m9p/ I don't have to use only this solution, if you have a better solution tell me ;) — Nerd, Nov 19 '15 at 10:30

score 0 · Answer 1 · answered Nov 24 '15 at 15:34

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); } 
  }

Hi PIIANTOM, thank you for your answer. i tried on js fiddle but seems it doesn't work https://jsfiddle.net/c8p0ecbt/ — Nerd, Nov 26 '15 at 13:19
What do you mean by 'doesn't work?': Not the expected behavior? Nothing occurs? From your jsfiddle, I have the slide effect on the 3 images when overing the first one. — PIIANTOM, Nov 27 '15 at 15:02
Sorry, I tried JSfiddle on Firefox and nothing happened, now I tried again on Chrome and on Microsoft Edge and It works fine. Do you know how can i solve this? thank you — Nerd, Dec 01 '15 at 17:44
Of course. The sample I provided was just mainly about chrome / safari as only -webkit- prefix was here. For mozilla, you need -moz-. This is all about prefix for css animation here.....http://stackoverflow.com/questions/7844520/css-animation-works-in-chrome-but-not-in-firefox — PIIANTOM, Dec 02 '15 at 19:59

Wordpress gallery change images on mouse over

1 Answers1