title: Woocommerce change product image on hover with CSS
body: <p>I am trying to change the product image when the user hovers over it, with pure CSS, on the Woocommerce product archive page.</p>
  
  <p>In my CSS I am targeting the individual product for hover and covering it with the second image stored in my Woocommerce product image gallery.</p>
  
  <p>My code partially works. When I hover over the product image, the second image is displayed, but it is behind my original image and the size ratio is wrong. I have tried using <code>z-index:9999</code> but it is having no effect on the ordering.</p>
  
  <p>How can I change my original product image with my second image when user hovers on it? </p>
  
  <p>Here is the webpage showing below incorrect hover behaviour. CSS only enabled for the first product:
  <a href="https://proteinandpantry.com/shopnew" rel="nofollow noreferrer">Link</a></p>
  
  <p><strong>My Code:</strong></p>
  
  <pre><code>/* Selecting the individual product image */        
  .post-1394.product.type-product.status-publish.has-post-thumbnail.product_cat-protein.first.instock.shipping-taxable.purchasable.product-type-simple:hover {
  
  /* Replacing the product image with my secondary image from gallery */
      background: url(https://proteinandpantry.com/wp-content/uploads/2018/09/BeefJerkySaltAndPepper-324x324.jpg) 
  
      no-repeat;
      z-index: 9999;
  
      }
  </code></pre>
  
  <p><strong>Screenshot of result when hover over product:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/1CM82.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1CM82.jpg" alt="enter image description here"></a></p>