Title: Image Hover Change
Last modified: November 15, 2023

---

# Image Hover Change

 *  Resolved [tiagovieirar](https://wordpress.org/support/users/tiagovieirar/)
 * (@tiagovieirar)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/image-hover-change/)
 * Hello!
 * I am developing a website and I would like the funcion to: When I hover a product
   image on the main shop/category pages, I wanted the image to change to another
   one from the product image gallery. So basically show a different image of the
   same product only when hovering with the mouse.
 * Some things to take note:
 * I am using a Loop Grid to make the archive.
 * I want a different image for each product.
 * Is that possible to do with any .css ?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fimage-hover-change%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Naoko Takano](https://wordpress.org/support/users/nao/)
 * (@nao)
 * [2 years, 7 months ago](https://wordpress.org/support/topic/image-hover-change/#post-17202787)
 * Looking at the code, the product photos are displayed as a background image of`
   div` elements. There’s a way to swap the URL of those background images (like`
   div.product-1:hover { background-image: url('../b.jpg'); }`), but the CSS rule
   needs to be written for each image. You will also need to add a unique class 
   to each `div`.
 * Or, one of these plugins could do the job for you.
 * **WooCommerce Additional Variation Images** ([https://wordpress.org/plugins/woo-variation-gallery/](https://wordpress.org/plugins/woo-variation-gallery/))
 * **TP Product Image Flipper for Woocommerce **([https://wordpress.org/plugins/tp-product-image-flipper-for-woocommerce/](https://wordpress.org/plugins/tp-product-image-flipper-for-woocommerce/))
 *  Thread Starter [tiagovieirar](https://wordpress.org/support/users/tiagovieirar/)
 * (@tiagovieirar)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/image-hover-change/#post-17203573)
 * Hello. Thank you for your response.
 * So adding a CSS is out of the question, since I am using a loop grid. However
   I tested the second plugin and it does not working on my end at least. The shop
   page still shows no image on hover. The first plugin unfortunely seems to only
   work on the product page itself, not the archive.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/image-hover-change/#post-17205003)
 * The hover effect is accomplished with CSS, but information on what image to show
   on hover has to exist somewhere else. And that information has to somehow relate
   to the existing thumbnail images so we know which image to display in place of
   which existing image.
 * Often the easiest way to do this is to have two images in HTML, both taking up
   the same position. Initially the upper layer one is hidden, but on hover it is
   made visible. You’d need to alter the HTML that’s output by the loop grid. Unfortunately,
   I’m not sure how to accomplish this with the loop grid.
 * I know that altering the archive template to generate HTML with PHP instead of
   the loop grid would work. Or use a custom shortcode instead of the loop grid 
   block. Or you could develop your own bespoke loop grid block.
 * Yet another possibility is to use JavaScript to display another image on hover.
   The relation of hover image to static image would have to be defined in an JS
   array structure of some sort. This is where each div having a unique ID or class
   would be very useful. The JS array structure could be constructed using PHP as
   the archive grid is being output. But once again, I’m not sure how to do this
   with the loop grid. I’d want to rely on either a custom template or shortcode.
 * In short, the loop grid is probably contrary to you desired goal.
 *  Thread Starter [tiagovieirar](https://wordpress.org/support/users/tiagovieirar/)
 * (@tiagovieirar)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/image-hover-change/#post-17209623)
 * Thank you, I ended up using the product archive with a plugin that allows me 
   to change the image.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Image Hover Change’ is closed to new replies.

## Tags

 * [hover](https://wordpress.org/support/topic-tag/hover/)
 * [Image hover](https://wordpress.org/support/topic-tag/image-hover/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 4 replies
 * 3 participants
 * Last reply from: [tiagovieirar](https://wordpress.org/support/users/tiagovieirar/)
 * Last activity: [2 years, 6 months ago](https://wordpress.org/support/topic/image-hover-change/#post-17209623)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics