Archived topic
Wondering how to create WC/product-category/xxx/ image with floating caption...
7 replies · Started by robchanoi on August 3, 2018
Just wondering how to create an image like this where a caption of the name of the product category floats up when you scroll over it and it lists number of products within the category -
https://ld-wp.template-help.com/woocommerce_59189/
Under "browse our categories" there are 4 categories.
I've tried dropping in various elements from elementor including the WC ones or GP shortcodes but not seeing it.
Many thanks if you're able to shed some light.
:)
OK that would take quite a bit of Custom CSS. If you can provide a Site URL with the Category shortcode in place and make sure it includes the title and number of products we can see what we can do :)
Many thanks again David and my apologies for taking so long to reply.
Should I disclose my site here or through a a private email?
Thank you.
Hi there,
you can edit your original topic and add your like to the Site URL, this remains private.
And we can see if its do-able :)
Hi, topic edited and here is the code for this specific category as it appears on the home page:
[products limit=”8″ columns=”4″ category= ”Men's Pleasure Toys”]
Kind regards.
Hi there,
Maybe something like this would work?:
.elementor-image .wp-caption {
position: relative;
}
.elementor-image .wp-caption .wp-caption-text {
background: #000;
color: #fff !important;
position: absolute;
width: 100%;
bottom: 0;
transition: bottom 500ms ease, opacity 500ms ease;
opacity: 0;
}
.elementor-image .wp-caption:hover .wp-caption-text {
bottom: 50%;
opacity: 1;
}Thanks Tom,
Where exactly should I paste this piece of code if you don't mind advising?
Many thanks.
This should help: http://docs.generatepress.com/article/adding-css/
