What is a CSS Card?

When you go to a website, you may see elements that are closely put together for example, on a shopping / e-commerce site, you’ll see boxes containing images and titles of product, on a portfolio website, you’ll see something similar but relating to a person and their career etc.

How to create a flippable CSS Card:

Step One: The HTML

For this we need:

i. Two elements that we are going to make flippable

ii. A ‘container for the flippable elements’

The two elements have the classes of .front and .back

The container has the class of .card

<div class="card">

<section class="front"></section>

<section class="back"></section>

</div>

At this point, we will only see it in code i.e. when we use inspect element or in the HTML file. We don’t see it in the visual webpage. We need to give it some visibility

Empty elements have no height

If we don’t declare width and height, the default width and height will be set for those elements. Usually the default height for empty elements in many browsers is 0px. This means we won’t see the elements in the visual webpage (we will only see it in code i.e. when we use inspect element).

Step Two: Visibility

As you can see from the screenshot above, empty elements have no height, so we need to set a height and border

.card {

height:200px; border:solid;

}

Now you should see something that looks like this: