Archived topic
Overlay
5 replies · Started by Andrew on December 16, 2021
Is there a setting or effect in that i can use to overlay a container on hover with a color? Just checking before implementing some CSS. Please scroll down just a little and I was wondering if I could have a color overlay the woven cord strapping box on hover
Hi Andrew,
Will it be only for the image on the box or for the entire box, effectively overlaying the border as well?
Let us know. :D
I built that after i sent the message, I would say just the image. Looking at the top two rows of products, is what I done ti them achievable with just GB or would it still require CSS, I don't mind adding CSS, but if I didn't have to would be great lol. Trying ti expand my knowledge on your products capabilities.
Try adding an additional CSS class to the GB container of the image boxes.
And then add this CSS:
.the-class-you-added .wp-block-image:hover > *:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: red;
opacity: 0.5;
}
.the-class-you-added .wp-block-image:hover > * {
position: relative;
}Change the-class-you-added to the class you've added on the container block's additional CSS class(es).
You then remove the caption and place it on its own Headline block. :D
Awesome thank you!
No problem. :D
