Custom Card Code Needed

Support
#1

Hi, I would please need a custom code for a flip card that has a plain image on the front, and another image on the back but on the back it should still have text & button.

Thank you,
Amy

#2

Hello Amy,

Thanks for asking. :slight_smile:

I suggest you to use Cornerstone Flip card element. And then add following CSS under X > Theme Options > CSS to display image on front and back while making sure that the text remains hidden on front.

.x-face-outer.front .x-face-content {
    display: none;
}

.x-face-outer.front {
  background: url("Insert Image URL") no-repeat top center;
}
.x-face-outer.back {
  background: url("Inset Image URL") no-repeat top center;
}

Please replace Insert Image URL with the URL of the image.

The final output should look something like this. https://cl.ly/1Y3923433x02

Let us know how it goes.

Thanks.

#3

Hi, That’s great, thanks. What should I do if I have multiple cards that need to have different images each? I’ve tried adding class card-1, card-2 etc to each and then adding .card 1, .card 2 etc in front of each line in CSS however that doesn’t seem to work. Can you please help?

#4

Is there an easier way maybe to create the sort of “portfolio” effect, so that I can have a series of pics that have an overlay & text when you hover and when you click to take you to a certain page?

Thanks

#5

Hi Amy,

Your approach that utilizes custom CSS classes should work fine, could you please implement this solution on your website then provide us with your website link so we can check why it’s not working?

Thanks.

#6

Hi,

Please see link here: https://elyde.co.uk/?ign_skip=7350770576082

The pictures also don’t seem to be responsive? Can you please advise?

Thank you

#7

Hello @Amy209301,

Thanks for updating the thread. :slight_smile:

You need to use the selector as following:

.x-card-outer.card-1 .front .x-face-content {
    display: none !important;
}

Please replace card-1 with the class name.

Regarding responsive, it looks like you have figured out the CSS class thing. To fix the responsive nature, you can add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
   .card-1 .x-face-outer.front {
    background: url(https://elyde.co.uk/wp-content/uploads/2018/04/Asset-3.png) no-repeat top center;
    background-size: 100%;
}
}

To know more about background size CSS property, please take a look at following tutorial.

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Please take above CSS as a pointer. You just need to rename the CSS name and logic remains the same.

Let us know how it goes.

Thanks.

#8

That worked, thanks a million!

#9

You are most welcome. :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.