Help with Flip Card or CSS

[EricDF94]

I am trying to make an effect of a coin flipping when you hover over it. I got it to work using the Classic Card element but it only works on the editor, not the live page. It only shows the first side and won’t flip. I’m not sure if it’s because of how I set it up, I had to basically make everything blank and then for the content I put an image via html for both front and back.

I also tried to make the effect with CSS but I don’t really know what I am doing. I got somewhat close with

.tcoin:hover 
{
  content: url(https://digixid.com/wp-content/uploads/2019/05/ct-coin.png);
  
  z-index: 999;
  width: 100%;
  transform: rotateX(180deg);
  transition: all 1s
}

but the image swaps before the transition goes and the second image is upside down.

I don’t really know CSS so if you could either advise me on a fix for the Card element or some tips on the CSS that would be appreciated.

https://digixid.com/test-page/
The top right is the CSS one and the second one is the card element.

[mldarshana]

Hi Eric,

Thanks for writing in! First of all, please note that custom development is outside our scope of the support.

However to get the similar effect on images, I would suggest you to check the following detailed resource and implement it accordingly on your images (https://davidwalsh.name/css-flip). You can also check it’s demo examples from here (https://davidwalsh.name/demo/css-flip.php).

Hope that helps.
Thanks!

[EricDF94]

I will give it a look although it would be easier if the card element worked. Any idea why it doesn’t? It works as I want to to when I am in cornerstone editor but on the live page it doesn’t flip. I cleared cache, tried a different browser, etc.

Edit - Nevermind, the code was a lot easier than I initially thought. I got it working, thanks for the link!

[ruenel]

Hey Eric,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.