Merge pull request abhigyan-c#11 from abhigyan-c/main

UI improvement 1
satatya · Feb 17, 2022 · 242dcd5 · 242dcd5
2 parents 6b8115d + 8b6ed3d
commit 242dcd5
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 4 deletions.
diff --git a/CSS/other_requisites.css b/CSS/other_requisites.css
@@ -184,6 +184,55 @@ div.desc {
   cursor: url(../Images/cursor.png), auto;
 }
 
+.img-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+
+.img-wrapper > img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  object-fit: cover;
+  object-position: center;
+}
+
+.img-wrapper > .content {
+  position: absolute;
+  inset: 0;
+  font-size: 2rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, .4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.img-wrapper > img,
+.img-wrapper > .content {
+  transition: 200ms ease-in-out;
+}
+
+.img-wrapper:hover > img.blur {
+  filter: blur(5px);
+}
+
+.img-wrapper:hover > img.gray {
+  filter: grayscale(1);
+}
+
+.img-wrapper:hover > img.zoom {
+  transform: scale(1.1);
+}
+
+
+.img-wrapper > .content.slide-down {
+  transform: translateY(-100%);
+}
+.img-wrapper:hover > .content.slide-down {
+  transform: translateY(0);
+}
+
 #f1{
   background-color: lightgreen;
   font-weight: 500;

diff --git a/HTML/index.html b/HTML/index.html
@@ -84,7 +84,10 @@ <h1><br>
         <div class="responsive">
             <div class="gallery">
               <a target="_blank" href="#">
-                <img src="../Images/Rajasthan_Chittorgarh.jpg" width="600" height="400">
+                <div class="img-wrapper">
+                <img src="../Images/Rajasthan_Chittorgarh.jpg" alt="DESERT" width="600" height="400" class="blur">
+                <div class="content slide-down">View Package</div>
+              </div>
               </a>
               <div class="desc">Rajasthan is a glittering jewel of India, and we are here to make your trip to that jewel a fun and adventurous one!so hope you enjoy our Rajasthan package...</div>
             </div>
@@ -94,7 +97,10 @@ <h1><br>
           <div class="responsive">
             <div class="gallery">
               <a target="_blank" href="#">
-                <img src="../Images/Ladakh.jpg" alt="Forest" width="600" height="400">
+                <div class="img-wrapper">
+                <img src="../Images/Ladakh.jpg" alt="Forest" width="600" height="400" class="blur">
+                <div class="content slide-down">View Package</div>
+              </div>
               </a>
               <div class="desc">Explore untold destinations of leh ladakh with landscape of ladakh capturing your heart...</div>
             </div>
@@ -103,7 +109,10 @@ <h1><br>
           <div class="responsive">
             <div class="gallery">
               <a target="_blank" href="#">
-                <img src="../Images/Andaman.jpg" alt="Northern ISLANDS" width="600" height="400">
+                <div class="img-wrapper">
+                <img src="../Images/Andaman.jpg" alt="Northern ISLANDS" width="600" height="400" class="blur">
+                <div class="content slide-down">View Package</div>
+              </div>
               </a>
               <div class="desc">Are you an oceanholic?Love the blue waters and shades of palm tree on the beachside? Andaman's the answer for you...</div>
             </div>
@@ -112,7 +121,10 @@ <h1><br>
           <div class="responsive">
             <div class="gallery">
               <a target="_blank" href="#">
-                <img src="../Images/NK.jpeg" alt="CITY" width="600" height="400">
+                <div class="img-wrapper">
+                <img src="../Images/NK.jpeg" alt="CITY" width="600" height="400" class="blur"> 
+                <div class="content slide-down">View Package</div>
+              </div>
               </a>
               <div class="desc">Welcome to Pyongyang, Comrade...Hope You Enjoy Here...</div>
             </div>