[Resolved] div with background image generate block hover

[Javier]

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

[Fernando]

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.

[Javier]

ok I have done it as you say, but I don’t know how to position the tit on that image, any suggestions, THANKS

[David]

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….

[Javier]

ohh, perfect thanks David, I don’t control the css grid, but it works.

[David]

Glad to hear that!

[Author]

Posts