- This topic has 7 replies, 3 voices, and was last updated 7 years, 9 months ago by
.
-
Posts
-
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.
🙂
Customer Support
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.
Lead Developer
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/
- You must be logged in to reply to this topic.
