<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale = 1">
    <title>CSS Card Flip</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    </head>

    <body>
        <div class="maincontainer">
            <div class="back">
                <h2>Copywriting</h2>
                <p>Introduction to Copywriting’ workshop focuses on the theory and processes of professional copywriting as applied to persuasion, reasoning, and rhetoric. This workshop is best-suited to learning how to write and think about consumer-driven functions.</p>
            </div>
            <div class="front">
                <div class="image">
                <img src="https://i.postimg.cc/nhG8H3X6/copywriting.jpg">
                <h2>Copywriting</h2>
                </div>
            </div>
        </div>
        <div class="maincontainer">
            <div class="back">
                <h2>Content Marketing</h2>
                <p>Introduction to Content Marketing workshop focuses on building content frameworks that are designed for and directed at communication engagement. This interdisciplinary workshop is best-suited to learning visual and written communication strategies.</p>
            </div>
            <div class="front">
                <div class="image">
                <img src="https://i.postimg.cc/ydrv1ZXq/contentmarketing.jpg">
                <h2>Content Marketing</h2>
                </div>
            </div>
        </div>
        <div class="maincontainer">
            <div class="back">
                <h2>Web Writing</h2>
                <p>Introduction to Web-Writing workshop focuses on building creative and systemic digital content through online user experiences that benefit people and robots. This workshop is best-suited to creating content for digital platforms and devices — websites, mobile, game consoles, and virtual reality engines.</p>
            </div>
            <div class="front">
                <div class="image">
                <img src="https://i.postimg.cc/ZqbG0630/webwriting.jpg">
                <h2>Web Writing</h2>
                </div>
            </div>
        </div>        

    </body>
</html>
.maincontainer
{
    width: 302px;
    height: 299px;
    margin: 10px;
    float: left; /* stack each div horizontally */
}

img
{
   border-radius: 10px;
}

.back h2
{
    position: absolute;
}

.back p
{
    position: absolute;
    top: 50px;
    font-size: 15px;
}

.front h2
{
    position: absolute;
    padding: 10px;
    top: 200px;
    color: #000;
}

/* style the maincontainer class with all child div's of class .front */
.maincontainer > .front
{
    position: absolute;
    transform: perspective(600px) rotateY(0deg);
    
    width: 302px;
    height: 290px;
    
    backface-visibility: hidden; /* cant see the backside elements as theyre turning around */
    transition: transform .5s linear 0s;
}

/* style the maincontainer class with all child div's of class .back */
.maincontainer > .back
{
    position: absolute;
    transform: perspective(600px) rotateY(180deg);
    background: #262626;
    color: #fff;
    width: 302px;
    height: 290px;
    border-radius: 10px;
    padding: 5px;
    backface-visibility: hidden; /* cant see the backside elements as theyre turning around */
    transition: transform .5s linear 0s;
}

.maincontainer:hover > .front
{
    transform: perspective(600px) rotateY(-180deg);
}

.maincontainer:hover > .back
{
    transform: perspective(600px) rotateY(0deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.