Hover over product images and they change

How can I implement a code I the product gallery page where when I hover over a product, it changes the image shown to another version of that product?

I'm trying to show other colours of clothes I have and wondered if this was possible in cs cart


I just did this myself. I did this on a page but you can use the product description as well.

Insert image then with the “insert/edit image” box still open click on “advanced” tab and check"Alternative Image" and fill in the “For Mouse Over/out” boxes with image url's.

Mouse over box = new image

mouse out box = original image

I made the image size of the mouse out larger so that it becomes a close up of my product.

To make the image larger you could also use the “transform: scale(x,y)” CSS class. There is no additional image with this method.

I just added this to my CSS so the logo bulges a little on mouse over:

.logo-container a:hover {transform: scale(1.05,1.05);}


thanks for the reply, just one thing, where would i go to start that process? as ive been in product descriptions etc and cannot find where you are talking about?

thanks again

I will try to show a pic.

You will find this in the products description area.


Then this