Archived topic
Modify - Product Catalog of Prime - Site Library template
1 reply · Started by Former User on April 24, 2020
Viewing posts 1–2 of 2
Hi,
I'm going to use "Prime" template from your site-library, but before of all i would like to know if it's possible only to apply the shadow in the pic of the product when i put "hover" the cursor over each product.
I mean i would like the text of each product be separated of the div that contains the picture and the text with the same "shadow-hover" effect, and only keep that effect in the picture of each product.
Thanks for everything.
Sigreo
Hi there,
yes, Prime uses some CSS to create that effect. After installing the site go to Customizer > Additional CSS and replace this CSS:
/* Product archives and product blocks styles */
.woocommerce ul.products li.product,
.wp-block-columns.contact .wp-block-column {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
border: 1px solid #ddd;
transition: all 0.1s ease-in;
border-radius: 3px;
box-sizing: border-box;
}
.woocommerce ul.products li.product:hover,
.wp-block-columns.contact .wp-block-column:hover {
box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
}with this:
/* Product archives and product blocks styles */
.woocommerce ul.products li.product img,
.wp-block-columns.contact .wp-block-column img {
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
border: 1px solid #ddd;
transition: all 0.1s ease-in;
border-radius: 3px;
box-sizing: border-box;
}
.woocommerce ul.products li.product:hover img,
.wp-block-columns.contact .wp-block-column:hover img {
box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
}
This archived topic is closed to new replies.
