Placing image in 3 classic cards

[Freund]

Hello,
I need a help in placing an images on 3 classic cards individually on one section.
I used the css code I got from one of the topics here but instead of placing different images in the front and in the back of those cards individually, but the same image automatically placed on those 3 cards which is totally not the one I wanted to do when placing these codes below.
I understand this is not the exact css code and the URL link is only for 1 front background and 1 at the back. And I also want to change the size of the card. Here’s the screenshot I have.
Hoping someone can help.
Thanks!

.x-face-content {
display: none !important;
}
.x-face-outer.front {
background:url(“Add front image URL here”) !important;
}
.x-face-outer.back{
background:url(“Add back image URL here”) !important;
}
.x-card-inner {
height: 250px !Important;
}

[rad]

Hi there,

Thanks for posting in.

You should implement it with unique class name, example, inspect your card and add card-one to the first card’s Class input field, then card-two to second card’s Class input field, and so on. Then your CSS should be like this

.x-face-content {
display: none !important;
}
.card-one .x-face-outer.front {
background:url("Add front image URL here") !important;
}
.card-one .x-face-outer.back{
background:url("Add back image URL here") !important;
}
.card-two .x-face-outer.front {
background:url("Add front image URL here") !important;
}
.card-two .x-face-outer.back{
background:url("Add back image URL here") !important;
}

.x-card-inner {
height: 250px !Important;
}

Please note that we don’t cover any customization so we can’t provide support on this custom CSS. You may enhance it, or we can help a bit for small change if it’s just a little enhancement

Hope this helps.

[Freund]

Hello,

Thanks for the immediate response. I tried to use the code you gave but it is not working.
There’s no image appeared on any of those cards.
When I tried to take out “.card-one” and “.card-two” on the code, the image appeared but all of the cards also has the same image again. Just like the screenshot I provided.
I understand that this is out of your scope but I still hope you can provide me one.
But thank you so much for trying to help. Really appreciated.

[christopher]

Hi there,

I wonder if you add the proper class name for each card or not? Only adding the CSS code will not do the trick. You will need to go to each card element and add the proper class name for each:

You should add the classes as follows:

card-one
card-two

If you still have problems implementing the feature we can check out your website to make sure you followed the instructions correctly. You will need to give us the information below using the Secure Note functionality of the post:

• WordPress Dashboard URL
• WordPress Dashboard Username
• WordPress Dashboard Password
• Name of the page that cards are in

As my colleague mentioned this is considered as a customization request, we will do our best to make sure you get the hang of the way you should do the customization but the actual implementation will be on your shoulders.

Thank you for your understanding and patience.

[Freund]

Hi!

Wow! It’s working now! Thank you very much for your help.
But can you also give me additional help how the content will appear on these cards?
It seems that the content of the card was disabled. Only the images appeared.
I really appreciate that you help me a lot now. Thank you very much.

[christian]

Hey @Freund,

As you can see, this is not a feature offered by the card element out of the box and custom code was needed. That is outside the scope of our support and my colleagues gave you a guide on how to achieve what you need with CSS. Further customizations from here would be getting into custom development which is outside the scope of our support. For that, you’ll need to hire a web developer. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.

Thank you for your understanding.

[Freund]

Hello,

Yes I understand. I already appreciated you all helped me a lot setting those images on the card.
Thanks for the option. I’ll think of this later.

Have a good day!

[rad]

You’re most welcome!