html and css(sass)

codeblogger · codeblogger · commit 01b7ab66e377 · 2019-03-10T09:38:33.000+03:00
diff --git a/3D Hover Effect - Alita Card/3D Hover Effect - Alita Card.html b/3D Hover Effect - Alita Card/3D Hover Effect - Alita Card.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>page</title>
+    <link rel="stylesheet" type="text/css" href="3D Hover Effect - Alita Card.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
+</head>
+<body>
+
+    <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>
+      
+
+</body>
+</html>
diff --git a/3D Hover Effect - Alita Card/3D Hover Effect - Alita Card.png b/3D Hover Effect - Alita Card/3D Hover Effect - Alita Card.png
diff --git a/3D Hover Effect - Alita Card/3D Hover Effect - Alita Card.scss b/3D Hover Effect - Alita Card/3D Hover Effect - Alita Card.scss
@@ -0,0 +1,83 @@
+@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;
+            }
+        }
+
+    }
+}
