Archived topic
Additional CSS classes not working on containers
5 replies · Started by Sarah on October 11, 2022
Hi !
I rarely have problems with this but for some reason I can't get my CSS classes to do what I expect when applied to containers.
Here is a jsfiddle which does exactly what I want (Read More link becoming visible when hovering over the image container).
http://jsfiddle.net/NinjaBeaver/ayduxfhm/58/
I'm applying these in what I think is the right heirachy in the GP container blocks, but I can't seem to get it to work. So I must be missing something.
Page link in private information as it's a dev site.
Hope you can help, it's probably something simple but my eyes are starting to cross. I've tried adding .gb-container but that doesn't seem to have any effect.
Thanks :)
Hi there,
with the current Container Block there is the inner container that needs to be considered in your CSS as your using the direct sibling combinator:
.information_popup_container .gb-inside-container >.popup_information {
visibility: hidden;
transition-duration: 8s;
transition-timing-function: ease-out;
}
.information_popup_container .gb-inside-container>.information:hover~.popup_information {
visibility: visible;
display: block;
}Perfect. Thank you! I did try something similar but it didn't work, this is spot on now.
Thank you so much!
Glad to be of help.
Thats a cool site btw .... in the future we will release an update where the inner container is removed ( you add it if you need it ) so this kind of custom development will be easier :)
Sounds good, and thanks :)
I love GeneratePress. Easily the best theme framework out there. I used to use Divi but I'd rather build without all the bells and whistles. That way I learn while I work and the websites are fast.
Thanks again :)
Thanks for the kind feedback :)
