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:
https://shop.gutenberghub.com/
Useful Gutenberg Plugins:
Editor Plus | https://wordpress.org/plugins/editorp...
Block Slider | https://wordpress.org/plugins/block-s...
EditorsKit | https://wordpress.org/plugins/block-o...
Join The Gutenberg Community on Facebook:
https://www.facebook.com/groups/26173...
Follow:
Facebook | / gutenberghub
Twitter | / gutenberghub
Website | https://gutenberghub.com/
#gutenberg #wordpress #block #tutorial #gutenberghub