Archived topic
Niche Theme CSS help
3 replies · Started by Jerry on April 15, 2021
Hi guys, loving the Niche theme and slowly learning more CSS.
Im a bit stuck though. On the product category page (https://sophiafioridiamonds.com/product-category/victoria-collection/victoria-interchangeable-band/) I'd like to hide the product title text (like the price) and only make it appear on hover in the same way the price slides in.
How do I do that? I tried to figure it out but got stuck.
Thanks guys
Hi there,
I'm not fully sure I understand it completely.
There seems to be multiple texts involved in this. There's the product title and the h5. I believe you're trying to do both?
You can try this CSS:
@media (min-width: 769px){
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
opacity: 0;
transition: all 0.4s;
transform: translateY(100%);
}
.woocommerce ul.products li.product h5 {
opacity: 0;
transition: all 0.4s;
transform: translateY(50%);
}
.woocommerce ul.products li.product:hover h5,
.woocommerce ul.products li.product:hover h2.woocommerce-loop-product__title {
opacity: 1;
transform: translateY(0);
}
}It looks weird w/o it though as there will be too much space on the bottom side of each product.
Yeah you are right. Is it possible just to show the H2 tag and the price? And then reduce the space similar to the rows like here: https://www.hammitt.com/collections/tote
Hi there,
How is the H5 being added to the site ? I see it as part of the single product after the product title - is it being hooked in?
