How to creak flip text effect on an image

Back>

This example demonstrate how to flip between an image and text. The magic is wrapping the image and text in the container template, then apply the css.

Here is the example:

Example

<div class="container">
<div class="box">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh4Tqqg6qvkLX4VLnUAG_i_4itevdZAB3FJcsMeemT1_m9n0ca-xhDgJFPEsZdGwmotPqRAV0sRZnfHNR2b5ykvxodFCDxgSV_MwKfVUk9n_4vDSrrLhr6cd8yypy9Jn0cmv1ccTWxUb22/s1600/magic_tree-7.jpg" />
                <br />
<div class="box-content">
<h3 class="name">
Night</h3>
<span class="post">Living Tree</span>
        </div>
</div>
</div>

<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" rel="stylesheet"></link>
    <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>

<style>
.container {
    width: 800px;
    height: 500px;
    overflow: hidden;
        }

        .box:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color:rgba(0,0,0,0.9);
            opacity: 0;
            transition: all 0.5s ease 0s;
        }
        .box:hover:before{
            opacity: 1;
        }
        .box{
            text-align: center;
            position: relative;
            overflow: hidden;
            color: #fff;
        }
        .box:after{
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            left: 170%;
            top: 0;
            transform: skewX(45deg);
            transition: all 1s ease 0s;
            background-color:#FF206E;
            z-index: 1;
        }
        .box:hover:after{
            left: -170%;
            top: 0;
        }
        .box img{
            width: 100%;
            height: auto;
        }
        .box .box-content{
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 100%;
            transition: all 0.5s ease 0s;
        }
        .box:hover .box-content{
            bottom: 40%;
        }
        .box .box-content .name{
            font-size:22px;
            font-weight: 700;
            margin: 0 0 10px;
            display: block;
            text-transform:uppercase;
            letter-spacing: 1px;
        }
        .box .box-content .post{
            display: block;
            font-size: 15px;
            font-style: italic;
            font-weight: 600;
        }

        @media screen and (max-width:990px){
            .box{
                margin-bottom: 30px !important;
            }
        }
</style>