Changing images in 3 classic cards on 1 section

[Freund]

Hello,
I need a help in placing an image on 3 classic cards 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 images automatically placed on those 3 cards which is totally not the want I wanted to do when placing these codes below.
I understand this is not the exact css code for this. Is there anyone who can help me?
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;
}

[matt]

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer (no official support provided here).

For Design & Development, Marketing & Media, and Hosting & Optimization discussions you are welcome to use the General Forum to discuss with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

[ruenel]

Hello There,

Thanks for writing in! Please keep in mind that the code that you are using is a general code. It will be applied to all card element. To apply it to a specific card, you must add an ID for each of your card element. For example: http://prntscr.com/hca4ov, http://prntscr.com/hca4wa

And you can use a custom css code like this:

#my-card-1 .x-face-content {
  display: none !important;
}

#my-card-1 .x-face-outer.front {
  background:url("Add front image URL here") !important;
}

#my-card-1 .x-face-outer.back{
  background:url("Add back image URL here") !important;
}

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

Now this code will only be applied to the card element that has an ID of “my-card-1”.

Hope this helps.