Tell us what you are trying to do?
I'm wanting to target the CSS class to create an overlay hover on a dynamic background image in a toolset container. I created my own class as you can see in the screenshots, however on the front end, I'm not seeing the changes. What precisely do I need to target in a CSS class to take the overlay off the graphic when hovering?
Is there any documentation that you are following? Can't find one
Is there a similar example that we can see? No
What is the link to your site? hidden link
Hi,
Thank you for contacting us and I'd be happy to assist.
I've checked the source code of your website's home page and the blog page, but couldn't find the elements from the screenshots.
Can you please share temporary admin login details, along with the link to the archive page in question? I'll be in a better position to suggest the next steps accordingly.
Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.
regards,
Waqar
Thank you for sharing the admin access.
I've checked the website and the Toolset Blocks plugins are not active on it. As a result, I'm not able to access WordPress Archives from Toolset either.
Not sure if the plugin was deactivated intentionally or not, but you can activate it and let me know and I'll suggest some CSS code selectors accordingly.
The reason that it is deactivated is because I can't build pages using Elementor Pro, Astra Pro and Toolset Blocks at the same time. There is some conflict when all three are activated. Either I have to use a different theme, or deactivate Elementor or deactivate Toolset Blocks. So for now I have to deactivate Blocks.
I don't know when you will be entering the site to see my issue. You are welcome to activate it to run the tests that you need to run. While you're in there and have all three activated, please add a new page under pages and try to build the page with Elementor. You will see you can't add anything.
Thanks!
Thank you for the permission.
I've checked the archive for the "Blog" posts and noticed that there is a "Container" block with a class "blog-archive" and inside that, a "single field" and a "heading" block have been added.
- container (class: blog-archive)
-- single field
-- heading
But to make the overlay CSS code work, you'll need to include another "Container" block with a class "blog-overlay" and then move the "single field" and a "heading" blocks inside that new "Container" block, so that structure becomes:
( example screenshot: hidden link )
- container (class: blog-archive)
-- container (class: blog-overlay)
--- single field
--- heading
This will make the CSS code work, to make the overlay show on hover.
As for the issue with Elementor content editing, when the Blocks plugin is active, I've split a new ticket for it and will follow-up on it shortly.
( ref: https://toolset.com/forums/topic/split-elementor-content-not-editable-when-blocks-plugin-is-active/ )