Archived topic
div with background image generate block hover
5 replies · Started by Javier on March 20, 2023
Hello, I wanted to know if you can help me. I want to achieve the hover effect, I give an example. but building it with generate block, the problem is that the image is put to the div with the "background.image" feature in css. And I don't know how to select this element from generate block, do you recommend me to use an image block inside the parent div and achieve this effect with css or can I use generate block? thank you
Hi Javier,
You'll need to add the image to an Image Block inside a Container Block first.
Using GenerateBlocks should be fine for this.
ok I have done it as you say, but I don't know how to position the tit on that image, any suggestions, THANKS
Hi there,
if you want to use that method, then add this CSS to place the title over the image:
.comercio-card {
display: grid;
}
.comercio-card > * {
grid-column: 1/-1;
grid-row: 1/-1;
margin-bottom: 0;
}
.comercio-card h3 {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
}The alternative would be to add the image as background image pseudo element on the Container....
ohh, perfect thanks David, I don't control the css grid, but it works.
Glad to hear that!
