Background Image with Text/Button on Top

[marketimpress]

What is the best way to create a box with a background image that when hovered on shows additional text and is clickable?

Thought there would be a standard element to insert but am not finding any element that does the trick. Here is an example of what I’m trying to achieve. Love the card option but can’t seem to figure out how to add a background image, not just color.

[nabeel]

Hi @marketimpress,

Thank you for reaching out to us. You can use the Card element for that and add a background image to your card element with custom CSS. First give your card element a class e.g card-bg (see screenshot below) then add the following code in the Theme Options > CSS:

.x-card-outercard-bg .x-face-outer.front .x-face-inner,
.x-card-outercard-bg .x-face-outer.back .x-face-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.x-card-outer.card-bg .x-face-outer.front .x-face-inner {
    background-image: url('https://place-hold.it/300x1000');
}

.x-card-outer.card-bg .x-face-outer.back .x-face-inner {
    background-image: url('https://place-hold.it/400x1200');
}

Just replace the background-image URL in the above code for both sides of the card.

Hope this helps!

[marketimpress]

Thank you Nabeel, just tried that and it does work. A couple additional questions:

• Can I modify the overall size of the card?

• If I want to force it not to have a backside, is that possible?

[ruenel]

Hello @marketimpress,

• The size of the card will depend on its container. You will need to adjust your column width and the card width will follow.

To prevent the back side from displaying or to avoid the card from flipping, you can make use of this code:

.x-card-outer.flip-3d.flipped .x-card-inner {
    transform: none;
}

Hope this helps. Please let us know how it goes.

[marketimpress]

Unfortunately, that code did not stop the card from flipping.

[ruenel]

Hello @marketimpress,

Sorry if the code did not work. Please update it again and use this:

.x-section .x-card-outer.flip-3d .x-card-inner,
.x-section .x-card-outer.flip-3d.flipped .x-card-inner{
    transform: none;
}

Please let us know if this works out for you.