zoom added to main image on index.html via style.css

markj0hnst0n · Jun 2, 2020 · 9bda6e0 · 9bda6e0
1 parent 1c58272
commit 9bda6e0
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -40,10 +40,14 @@ nav li{
 }
 
 #hero-image{
-    height: 420px;
+    height: 600px;
     width: 100%;
     background: url("../images/fauxdjsheroimage.jpg") no-repeat center center;
     margin-top: 150px;
+    animation-name: main-pic-zoom;
+    animation-duration: 10s;
+    animation-fill-mode: backwards;
+    margin-bottom: 10px;
   }
 
 .book-us-button {
@@ -93,7 +97,7 @@ section a:hover{
     text-align: center;
     height: 200px;
     margin: 0%;
-    margin-top: 0%;
+    margin-top: 20px;
     margin-bottom: 140px;
 }
 
@@ -205,6 +209,15 @@ section a:hover{
 
 /*--Media Queries */
 
+@keyframes main-pic-zoom{
+  from{
+    transform: scale(1)
+  }
+  to{
+    transform:scale(1.1)
+  }
+}
+
 @media screen and (max-width:943px){
 .book-us-button{
     left: 200px;