adding card hover design by rahul-bhati

zero-to-mastery · Oct 1, 2023 · fabfd59 · fabfd59
1 parent 8b89e75
commit fabfd59
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 8 deletions.
diff --git a/Art/Rahul-Bhati/Rahul-Bhati.gif b/Art/Rahul-Bhati/Rahul-Bhati.gif
diff --git a/Art/Rahul-Bhati/image/Forest.png b/Art/Rahul-Bhati/image/Forest.png
diff --git a/Art/Rahul-Bhati/image/Islands.jpeg b/Art/Rahul-Bhati/image/Islands.jpeg
diff --git a/Art/Rahul-Bhati/image/Lake.jpeg b/Art/Rahul-Bhati/image/Lake.jpeg
diff --git a/Art/Rahul-Bhati/image/Mountain.jpeg b/Art/Rahul-Bhati/image/Mountain.jpeg
diff --git a/Art/Rahul-Bhati/image/fav.png b/Art/Rahul-Bhati/image/fav.png
diff --git a/Art/Rahul-Bhati/index.html b/Art/Rahul-Bhati/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+     <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>Rahul-Bhati || Card Hover Effect ⛩</title>
+     <link rel="stylesheet" href="style.css">
+     <link rel="shortcut icon" href="image/fav.png" type="image/x-icon">
+</head>
+<body>
+     <div class="container">
+          <div class="box card_1">
+               <img src="image/Forest.png" alt="nature">
+               <h3>Forest</h3>
+          </div>
+          <div class="box card_1">
+               <img src="image/Islands.jpeg" alt="nature">
+               <h3>Islands</h3>
+          </div>
+          <div class="box card_1">
+               <img src="image/Lake.jpeg" alt="nature">
+               <h3>Lake</h3>
+          </div>
+          <div class="box card_1">
+               <img src="image/Mountain.jpeg" alt="nature">
+               <h3>Mountain</h3>
+          </div>
+     </div>
+</body>
+</html>
diff --git a/Art/Rahul-Bhati/style.css b/Art/Rahul-Bhati/style.css
@@ -0,0 +1,58 @@
+/* * {
+     box-sizing: border-box;
+} */
+
+body {
+     width: 100%;
+     height: 100vh;
+     /* margin-top: 0; */
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     background: #252f54;
+}
+
+.container {
+     position: relative;
+     display: flex;
+     align-items: center;
+     cursor: pointer;
+     border-radius: 30px;
+     flex-wrap: wrap;
+     gap: 10px;
+}
+
+.box {
+     max-width: 300px;
+     max-height: 400px;
+     border-radius: 30px;
+     background: #99a0bc;
+     box-shadow: rgba(207, 193, 193, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; 
+}
+
+img{
+     width: 100%;
+     height: 100%;
+     object-fit: cover;
+     transition: 0.5s;
+}
+
+.box img{
+     border-radius: 30px;
+}
+
+.box:hover img{
+     transform: translate(0, -70px);
+}
+
+h3{
+     display: none;
+     text-align: center;
+     transition:0.5s;
+     font-family:cursive;
+}
+
+.box:hover h3 {
+     display: block;
+     transform: translate(0, -50px);
+}
diff --git a/include.js b/include.js
@@ -5,6 +5,13 @@ let cards = [
     imageLink: './Art/Joy/triangle.gif',
     author: 'Joy',
     githubLink: 'https://github.com/royranger'
+  },
+  {
+    artName: 'Cart Hover',
+    pageLink: './Art/Rahul-Bhati/index.html',
+    imageLink: './Art/Rahul-Bhati/Rahul-Bhati.gif',
+    author: 'Rahul-Bhati',
+    githubLink: 'https://github.com/Rahul-Bhati'
   }
 ];
 
@@ -20,14 +27,14 @@ let contents = [];
 Shuffle(cards).forEach((c) => {
   contents.push([
     `<li class="card">` +
-      `<a href='${c.pageLink}'>` +
-      `<img class="art-image" src='${c.imageLink}' alt='${c.artName}' />` +
-      `</a>` +
-      `<div class="flex-content">` +
-      `<a href='${c.pageLink}'><h3 class="art-title">${c.artName}</h3></a>` +
-      `<p class='author'><a href="${c.githubLink}" target="_blank"><i class="fab fa-github"></i> ${c.author}</a> </p>` +
-      `</div>` +
-      `</li>`
+    `<a href='${c.pageLink}'>` +
+    `<img class="art-image" src='${c.imageLink}' alt='${c.artName}' />` +
+    `</a>` +
+    `<div class="flex-content">` +
+    `<a href='${c.pageLink}'><h3 class="art-title">${c.artName}</h3></a>` +
+    `<p class='author'><a href="${c.githubLink}" target="_blank"><i class="fab fa-github"></i> ${c.author}</a> </p>` +
+    `</div>` +
+    `</li>`
   ]);
 });