Skip to content
Advertisements

3D Hover Effect – Alita Card

CODEPEN

3D Hover Effect – Alita Card

Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/3D%20Hover%20Effect%20-%20Alita%20Card


HTML

 <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>

CSS (sass)

@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;
            }
        }

    }
}
Advertisements

3 Comments »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: