How to Create WooCommerce Product Card Hover Effect in WordPress 

Hey Everyone, in this tutorial, I will show you how to create a WooCommerce product card hover effect in WordPress. The purpose of this tutorial is to teach you how to create creative content design in Gutenberg using default blocks without a 3rd party block plugin.
CSS Code:
---------------------------------------------------------------------------------------------------------------------
.woo-box-effect {
transition: 400ms;
cursor: pointer;
overflow: visible !important;
}
.woo-box-effect img, .woo-box-effect .wc-block-grid__product-image{
transition: 400ms;
}
.woo-box-effect .wp-block-cover__inner-container {
transition: transform 400ms;
}
.woo-box-effect:hover .wp-block-cover__inner-container {
transform: translateY(-50px);
}
.woo-box-effect:hover img{
transform: translate(-20px, -40px) rotate(-15deg) scale(1.4);
}
---------------------------------------------------------------------------------------------------------------------
GutenbergHub Shop:
shop.gutenberghub.com/
Useful Gutenberg Plugins:
Editor Plus | wordpress.org/plugins/editorp...
Block Slider | wordpress.org/plugins/block-s...
EditorsKit | wordpress.org/plugins/block-o...
Join The Gutenberg Community on Facebook:
groups/26173...
Follow:
Facebook | / gutenberghub
Twitter | / gutenberghub
Website | gutenberghub.com/
#gutenberg #wordpress #block #tutorial #gutenberghub

Хобби