Docs

[Ony]

Hey there, I was wondering if there was a way to change the card flip to a fade.

Or, more preferably, if you hover over it, it doesn’t flip/fade, but opens up a text field below it instead. Please see attached files for clarification.

What I am looking for is something very similar to http://vaynermedia.com/services where if you click on a tab (Creative & Production, Paid Media, and Account Management & Strategy) it appears in a dropdown like so.

[Ony]

This reply has been marked as private.

[Christopher]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Ony]

No other support who possibly knows any code to edit in the CSS or child theme to produce similar effects :(?

If not, I was wondering if there were a way to make it possible to fade the card instead of the flip transition when you hover.

[Lely]

Hi Ony,

Please try this custom CSS:

.x-card-outer.flip-3d .x-face-outer.front {
    z-index: 6 !important;
}
.x-card-outer.flip-3d .x-face-outer.back {
    z-index: 2 !important;
}
.x-card-outer.flip-3d.flipped .x-face-outer.front {
    z-index: 0 !important;
}
.x-card-outer.flip-3d.flip-from-top.flipped .x-card-inner {
    -webkit-transform: initial; 
    -ms-transform: initial;
    transform: initial;
}
.x-card-outer.flip-3d.flip-from-top .back, .x-card-outer.flip-3d.flip-from-bottom .back {
    -webkit-transform: initial;
    -ms-transform: initial;
    transform: initial;
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Ony]

Hey Lely,

How would I use this custom CSS? It seems to have no effect 🙁

Thanks!
Ony

[Paul R]

Hi Ony,

You need to add the code in Appearance > Customize > Custom > Edit Global CSS

Thanks

[Ony]

I’ve added it there, however it has made no effect. Unfortunately 🙁

[Rue Nel]

Hello There,

The code we gave should have work in your site. Unless otherwise there is a css conflict or invalid characters that affect the css code. To assist you with this issue, we’ll first need you to provide us with your URL. We’d like to check where did you added the code and if the code added is valid and no other css conflict that occurred in your page.

Thank you.

[Ony]

Hey Rue, unfortunately the site is offline.

However I found a way to procure better results! I will no longer need any support for the card faces.

Thanks so much for your great support! You guys are great 🙂

[Nabeel A]

Glad we could help 🙂

Cheers!

[Author]

Posts