Title: Hover images not working
Last modified: September 30, 2022

---

# Hover images not working

 *  Resolved [samovaari](https://wordpress.org/support/users/samovaari/)
 * (@samovaari)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/hover-images-not-working/)
 * We are trying to figure out why the hover images in our Woocommerce shop page
   are not displaying anymore. We have been selecting the hover image in the “Product–
   Hover image” field previously without any issues.
    Screenshots: [https://snipboard.io/uhWyl4.jpg](https://snipboard.io/uhWyl4.jpg)
   [https://snipboard.io/pDqHAf.jpg](https://snipboard.io/pDqHAf.jpg)
 * We have no contact with the theme developers anymore but were able to find the
   following codes in the theme files:
 *     ```
       {
           "key": "group_5e2871966914d",
           "title": "Product",
           "fields": [
               {
                   "key": "field_5e2875af54486",
                   "label": "Hover Image",
                   "name": "hover_image",
                   "type": "image",
                   "instructions": "",
                   "required": 0,
                   "conditional_logic": 0,
                   "wrapper": {
                       "width": "",
                       "class": "",
                       "id": ""
                   },
                   "return_format": "array",
                   "preview_size": "medium",
                   "library": "all",
                   "min_width": "",
                   "min_height": "",
                   "min_size": "",
                   "max_width": "",
                   "max_height": "",
                   "max_size": "",
                   "mime_types": ""
               }
           ],
           "location": [
               [
                   {
                       "param": "post_type",
                       "operator": "==",
                       "value": "product"
                   }
               ]
           ],
           "menu_order": 0,
           "position": "normal",
           "style": "default",
           "label_placement": "top",
           "instruction_placement": "label",
           "hide_on_screen": "",
           "active": 1,
           "description": "",
           "modified": 1579710438
       }
       ```
   
 *     ```
       .post-type-archive-product main,
       .archive.tax-product_cat main {
           margin-top: 80px;
       }
   
       .products {
           list-style: none;
           padding: 0;
           width: 100%;
           display: flex;
           flex-wrap: wrap;
       }
   
       .products .product {
           width: 33.33%;
           padding: 0 1px;
       }
   
       .product-img-wrapper {
           position: relative;
           display: flex;
       }
   
       .product-img-wrapper img {
           width: 100%;
           height: intrinsic;
       }
   
       .product-img-wrapper img:last-of-type {
           position: absolute;
           top: 0;
           left: 0;
           opacity: 0;
           visibility: hidden;
           z-index: 1;
           transition: all 0.25s ease-in-out;
       }
   
       .product-img-wrapper:hover img:last-of-type {
           opacity: 1;
           visibility: visible;
       }
       ```
   
 * Any help would be much appreciated. The hover images stopped working about a 
   month ago when we updated to the newest version of WordPress.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhover-images-not-working%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Thread Starter [samovaari](https://wordpress.org/support/users/samovaari/)
 * (@samovaari)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/hover-images-not-working/#post-16070980)
 * Hi, still experiencing this issue but with some more background to it, this is
   found in our products-page.php
 *     ```
       {% extends "base.twig" %}
       {% block main %}
       {% if products %}
           <div class="shop-page-wrapper" data-bg="{{ shop_color}}">
               {# <nav class="categories">
                   {% include 'partials/filters-nav.twig' %}
               </nav> #}
               <div class="products">
                   {% for post in products %}
                       {{ fn('timber_set_product', post) }}
                      <strong> {% set hover = function('get_field', 'hover_image', post.id ) %}</strong>
                       <a href="{{ post.link }}"  class="product {{ post.class ~ ' width-' ~ width_in_shop }}">
                           <div class="product-img-wrapper">
                               <img class="" src="{{ post.thumbnail.src('shop_catalog') }}"/>
                               <img class="" src="{{ hover.sizes.shop_catalog }}"/>
                           </div>
                           <div class="product-info">
                               <h3 class="woocommerce-loop-product__title">{{ post.post_title }}</h3>
                               <div>{% do action('woocommerce_after_shop_loop_item_title') %}</div>
       ```
   
 *  Plugin Support [ACF Support](https://wordpress.org/support/users/acfsupport/)
 * (@acfsupport)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/hover-images-not-working/#post-16543509)
 * Hi there!
 * ACF Support Team here. This forum is generally used by ACF users to help each
   other out.
 * However, we would love to continue investigating and troubleshooting this issue,
   please can you create a ticket using our ​[support](https://www.advancedcustomfields.com/contact/)
   form and we can look into it further.

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

The topic ‘Hover images not working’ is closed to new replies.

 * ![](https://ps.w.org/advanced-custom-fields/assets/icon.svg?rev=3207824)
 * [Advanced Custom Fields (ACF®)](https://wordpress.org/plugins/advanced-custom-fields/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/advanced-custom-fields/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/advanced-custom-fields/)
 * [Active Topics](https://wordpress.org/support/plugin/advanced-custom-fields/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/advanced-custom-fields/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/advanced-custom-fields/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [ACF Support](https://wordpress.org/support/users/acfsupport/)
 * Last activity: [3 years, 2 months ago](https://wordpress.org/support/topic/hover-images-not-working/#post-16543509)
 * Status: resolved