<div class="image">
        <div class="text">
            <h2>Alita: Battle Angel</h2>
            <p>
                    The movie has a February 14, 2019 release date directed 
                    by Robert Rodriguez, produced by James Cameron, starring
                    Rosa Salazar as Alita, Eiza González as Nyssiana, Michelle
                    Rodriguez as Gelda, Jennifer Connelly as Chiren, with
                    Christoph Waltz as Dr. Dyson Ido, Jeff Fahey as McTeague,
                    Ed Skrein as Zapan, Mahershala Ali as Vector, Casper Van
                    Dien as Amok, Lana Condor as Koyomi and Jackie Earle Haley.
            </p>
        </div>
        <div class="box"></div>
    </div>

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
html{height: 100%;}
body{
    padding:0;
    margin: 0; 
    background: linear-gradient(#262626,#b2ad7f );
    font-family: 'Ubuntu', sans-serif;

    .image{
        width: 500px;
        height: 280px;
        margin: 150px auto;
        perspective: 1000px;

        .box{
            display: block;
            width: 100%;
            height: 100%;
            background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://images5.alphacoders.com/984/984310.jpg");
            background-size: 0,cover;
            transform-style: preserve-3d;
            transition: all 0.5s;

            &:hover{
                transform: rotateX(80deg);
                transform-origin: bottom;
            }
            
            &:after{
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 36px;
                background: inherit;
                background-size: cover, cover;
                background-position: bottom;
                transform: rotateX(90deg);
                transform-origin: bottom
            }

            &:before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                box-shadow: 0px 0px 100px 50px rgba(0,0,0,.5);
                transition: all .5s;
                opacity: .15;   
                transform: rotateX(95deg) translateZ(-80px) scale(0.75);
                transform-origin: bottom;

            } 
            
            &:hover:before{
                opacity: 1;
                box-shadow: 0px 0px 25px 25px rgba(0,0,0,.5);
                transform: rotateX(0) translateZ(-60px) scale(.85);
            }
        }

        .text{
            position: absolute;
            width: 90%;
            height: 100%;
            top: 50%;
            left: 50%;
            
            transform: translate(-50%,-50%);
            text-align: center;
            color: #eee;
            h2{
                color: #262626;
                text-decoration: underline;
            }
        }

    }
}