Woocommerce Change Product Image on Hover With CSS

I want to change Product Image on Hover in Woocommerce wordpress

@N. Mar, Yes, the custom URL I used was only as an example. With background-image: url("img2"), that would select img2 if it is the same folder as your CSS file. However, if your images are kept in a separate folder, for example "images", the CSS might be background-image: url("images/img2").

There is a StackOverflow post on folder paths here that might be quite useful: What does "./" (dot slash) refer to in terms of an HTML file path location?

Because you're using WooCommerce, I imagine how you're images are stored is a little different. This article might shed some light on it: https://enviragallery.com/where-does-wordpress-store-uploaded-images/

If you want this to be automatic on Wordpress, you will need to use PHP. The issue is that you cannot use PHP in CSS. Instead, you would need to add the styles inline or in the head of the theme's html (as opposed to a separate stylesheet) and then use PHP to reference the image. This is a good bit trickier. There's another Stackoverflow post on that here: CSS background images in WordPress

Switch product image on hover on WooCommerce archive page

What I think you'll want to do, assuming your installation is a somewhat standard WooC installation, is utilize the loop item action hook to add the desired on-hover image.

add_action( 'woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image' ) ; 

function add_on_hover_shop_loop_image() {

    $image_id = wc_get_product()->get_gallery_image_ids()[1] ; 

    if ( $image_id ) {

        echo wp_get_attachment_image( $image_id ) ;

    } else {  //assuming not all products have galleries set

        echo wp_get_attachment_image( wc_get_product()->get_image_id() ) ; 

    }

}

Preliminary CSS:

/* CUSTOM ON-HOVER IMAGE */
.woocommerce ul.products li.product a img { 
    /* FORMAT ALL IMAGES TO FILL EQUIVALENT SPACE,
    to remove jitter on replacement */
    height: 150px;
    width: 150px;
    object-fit: cover;
    padding: 0;
    margin: 0 auto;
}
.woocommerce ul.products li.product a img:nth-of-type(2) {
    display: none;
}
.woocommerce ul.products li.product a:hover img:nth-of-type(2) {
    display: block
}
.woocommerce ul.products li.product a:hover img:nth-of-type(1) {
    display: none;
}

The above will get what you want for one type of shop archive display, to achieve a simple replacement, but there will be numerous particulars that you may need or want to customize for your site. 150x150px may not be the right size for your theme, for example. Or you may decide you need to replace the default image completely with a different set, and that to get a particular transition effect, or to get consistency with other effects in use on your site, you'll need a different approach to CSS and possibly to javascript.

Woocommerce change product image on hover with CSS

This is because you're using a background-image on the <li> element, as opposed to the <img> element itself. Because this is a parent element of the image, the background will never be shown above the image itself.

If you would like to keep the background image on the parent element, you could simply add a rule of opacity:0; for the child <img> element on hover.

e.g.

.product.type-product:hover img {
    opacity:0;
}

This will set the image opacity to 0 when you hover over the parent <li> element.

Another option you have is to add a container to the <img> element, and use a :before selector on that container element with the secondary image as the background image.

This would look something like:

ul.products li.product img {
    position:relative;
}

ul.products li.product .product-image-container:before {
    content:"";
    display:none;
    background: url(https://proteinandpantry.com/wp-content/uploads/2018/09/BeefJerkySaltAndPepper-324x324.jpg) no-repeat;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
}

And then show the before on hover of the parent:

.product.type-product:hover .product-image-container:before {
    display:block;
}

See an example of this here:http://jsfiddle.net/g5u4Lbxn/

Most browsers don't support the :before selector on images, so you'll need to add a container element for the image

With the image container element, the HTML for that particular <li> element should look like this:

<li class="post-1394 product type-product status-publish has-post-thumbnail product_cat-protein first instock shipping-taxable purchasable product-type-simple">
    <h2 class="woocommerce-loop-product__title">Spicy Teriyaki Turkey Jerky</h2>
    <div class="product-image-container">
        <img width="324" height="324" src="https://proteinandpantry.com/wp-content/uploads/2018/09/TurkeyJerky-324x324.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail wp-post-image">
    </div>
    <div class="star-rating">
        <span style="width:100%">Rated <strong class="rating">5.00</strong> out of 5</span>
    </div>
    <span class="price">
        <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>2.50</span>
    </span>
    <a href="/shopnew/?add-to-cart=1394" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="1394" data-product_sku="" aria-label="Add “Spicy Teriyaki Turkey Jerky” to your basket" rel="nofollow">Add To Box</a>
    <a class="xoo-qv-button" qv-id="1394"><span class="xoo-qv-btn-icon xooqv-search xoo-qv"></span>Learn More</a>
</li>

WooCommerce Product image Hover

I Tried this css code and it works.

.woocommerce ul.products li.product a {margin: 0;position: relative;}
.woocommerce ul.products li.product a img {max-width: 100%;display:
 block;position: relative;}
.woocommerce ul.products li.product{overflow: hidden;}
.woocommerce ul.products li.product .product_details {opacity: 0;
-webkit-transform: translateY(100%);-moz-transform: translateY(100%);
-ms-transform: translateY(100%);transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s,opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;position: absolute;
bottom: 0%;left: 0%;background: #eee;color: #000;width: 100%;padding: 5px;}
.woocommerce ul.products li.product:hover .product_details {opacity: 1;
-webkit-transform: translateY(0px);-moz-transform: translateY(0px);   
-ms-transform: translateY(0px);transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s,opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;}

Woocommerce show product title on hover image overlay

$(function () {
                jQuery(document).ready(function ($) { // When jQuery is ready
                    var shop_module = $('.divi-engine-custom-overlay');
                    var shop_item = shop_module.find('li.product');
                    shop_item.each(function () { // Runs through each loop item in the shop
                        var et_overlay = $(this).find('.et_overlay');
                        $(this).find('.product_category_title,span.price').clone().appendTo(et_overlay); // Adds Product Title and Price to the Overlay
                    });
                });
            });
// this will copy the price,title ( not move )

Edit:

The clone() function will make a copy of the element selected, and the "appendTo" -> as the name tells : will append selected content to the position ( element ). Note: append will not change any existing element inside the destination, it will just append new things.

woocommerce recent product hover color

You'll want to remove background here:

.product:not(.elementor):hover .prod-img-wrap:before, .shop-item:hover .prod-img-wrap:before, .prod-img-wrap:hover:before {

    background: rgba(255,255,255,0.6);

}

and add the transparency code to the image:

.prod-img-wrap:hover img {

    opacity: 0.6;

}

How to flip Product image on hover in wordpress?

just add custom image field, put 2 images (eg. featured and from custom field) in wrapper and change tier z-index on wrapper hover....
CSS:

.product-image--wrapper .img1 {
    position: relative;
    z-index: 1;
}

.product-image--wrapper .img2 {
    position: relative;
    z-index: 0;
}

.product-image--wrapper:hover .img2 {
z-index: 2;
}

..or just install: https://wordpress.org/plugins/woocommerce-product-image-flipper/ and follow: http://www.themelocation.com/how-to-flip-product-image-on-hover-in-woocommerce/

EDIT:

we fix WooCommerce Product Image Flipper with this code:

jQuery(document).ready(function($){
    jQuery( 'ul.products li.pif-has-gallery a:first-child' ).hover( function() {
        jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeInDown' ).addClass( 'animated fadeOutUp' );
        jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeOutUp' ).addClass( 'animated fadeInDown' );
    }, function() {
        jQuery( this ).find( '.wp-post-image' ).removeClass( 'fadeOutUp' ).addClass( 'fadeInDown' );
        jQuery( this ).find( '.secondary-image' ).removeClass( 'fadeInDown' ).addClass( 'fadeOutUp' );
    });
});