How can I have my product images change on hover to a random image from the product gallery?

Store Design
1

Hello!

I currently have a code in place that changes the product image to the last image in the products gallery. I’d like for it to change to any possible image within that products gallery randomly every time the mouse passes over.

I would greatly appreciate any help on this manner-

url: www.dude-ranch.co

pass: princess

THANKS!

Matteo

2

Hi @DudeRanchCo

Since you want to randomize the image - it would need custom development work on your store.

Or if you want, I can suggest you an app from the store which lets you set this up in one click.

Good luck!

1 Like
3

Hi @DudeRanchCo You can share the code of this section so I can edit it for you.

1 Like
4

Hi @DudeRanchCo

That’s a nice looking store!

As someone said here, you will need custom code.

If you want to do it in pure CSS, you might have to add all the images to the product grid card and do something like this:

https://uxdesign.cc/creating-randomness-with-pure-css-a990dafcd569

You can also do it in JS.

But unfortunately we can’t give a step by step guide here, since it’s a very custom feature.

1 Like
5

I believe this is it

// CUSTOM CODE HOVER ON PRODUCT IMAGE
/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}

@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}

.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
}
.grid-view-item .price__vendor{
display: none !important;
}

#SearchDrawer {
z-index:1001;
}

6

@thejustintharpe

I’d love any solution - please let me know what app is best for this

7

thanks @marcoswata !

I have the images uploaded to each product ready to go- i was able to find a code for the image hover effect in this community and I’m hoping someone with similar expertise might be able to help me “randomize” it - coding is a completely different language to me and I’m afraid I’ll destroy the site.

If not here, where might I be able to be better assisted?

8

Hello @Tos_expert