If you want to code your own solution, this article should help:
https://monsterspost.com/create-rollover-image-effect-css-html-js/
You can also study the source code of the plugin Steve suggested even if you don’t actively use the plugin.
Using separate images isn’t very performative, there is often a noticeable delay the first time the effect is applied because the second image has to be fetched. It helps a lot to pre-load the second image so it’s immediately available. There can still be a tiny delay. The most performative approach is to use image sprites and just shift the sprite origin. Sprites are typically used on small, icon-like images, but the same technique can be applied to any image of any size. The major drawback is the image used must be very specifically composed and dimensioned. Not very feasible for user supplied images.
https://www.tutorialrepublic.com/css-tutorial/css-sprites.php
The above references are not WP specific. You’ll need to get the related code properly integrated into WP via appropriate hooks and enqueuing.
Hi addirector,
I hope this message finds you well. It is not difficult if you want to code it by yourself then that can be done. Simply you have to display one image from the gallery. You can use the Woocommerce action hook woocommerce_before_shop_loop_item_title to achieve your image flip hover effect. The below code goes in child theme functions.php file.
add_action( 'woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image' ) ;
function add_on_hover_shop_loop_image() {
if( is_shop() ){
$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() ) ;
}
}
}
I will recommend you to follow the detailed instructions on this link which will be very helpful in coding your own solution. Have a great day!
Kind Regards,
Hi @themesjungle
The problem is, I am not using the WooCommerce shop page but rather a custom built page. See here: https://gunainmstore.com/shop
Can the code be amended to work on that page where I’m using the themes product list module?
Thanks
. Reason: removed redundant url
. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
