How to add pseudo-class to a div to create flip card

How to add pseudo-class to a div to create flip card

by Cord Thomas -
Number of replies: 2

Hi,

I have been asked to replicate a flip-card for a lesson.   An example of a flip card is here:  https://www.webnots.com/bootstrap/bootstrap-flip-cards.html# 

I am fairly adept at HTML/CSS and learning Bootstrap.  From all my searches, the only way to do this is use a pseudo-class and/or JavaScript.  I was hoping to introduce additional CSS in the Additional HTML setting but just learned from Moodle support that this is not possible in MoodleCloud.  Any thoughts on how to do this?   

The goal is to create an engaging / interactive lesson.  We've been using carousels, collapsing sections and a few other features of Bootstrap but feel that a flip card would be perfect for a section where there are four topics that we'd present in a 2x2 grid.

Thank you!

Average of ratings: -
In reply to Cord Thomas

Re: How to add pseudo-class to a div to create flip card

by Cord Thomas -
I was being a bit blind - i can add custom CSS in a STYLE tag in the "When BODY is opened" of the Additional HTML section of the Appearance Site Administration.

So, I basically modified this code and created a pretty nice flip card - https://www.w3schools.com/howto/howto_css_flip_card.asp
Average of ratings: -
In reply to Cord Thomas

Re: How to add pseudo-class to a div to create flip card

by Kelly Wiens -
This is so cool, Cord! I flipped out! 🤸‍♂️ In the future feel free to post more of your creative CSS versions of interactive learning elements.
Average of ratings: -