Merge pull request #22 from DharshiBalasubramaniyam/dharshi

add flip on hover effect to facilities section cards
juhinagpure · May 17, 2024 · 553801f · 553801f
2 parents 2770cd3 + f8ef7fa
commit 553801f
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -97,28 +97,52 @@ <h1>Our facilities</h1>
 
         </p>
         <div class="row">
-            <div class="facilities-col car">
-                <img src="./eduford_img/library.png" alt="">
-                <h3>World Class Library</h3>
-                <p>Our world-class library offers a vast collection of books, journals, and digital resources from
-                    around the globe, providing a sanctuary for learning.</p>
+
+            <div class="facilities-col">
+                <div class="facilities-col-inner">
+                    <div class="facilities-col-front">
+                        <img src="./eduford_img/library.png" alt="">
+                    </div>
+                    <div class="facilities-col-back">
+                        <h3>World Class Library</h3>
+                        <p>Our world-class library offers a vast collection of books, journals, and digital resources
+                            from
+                            around the globe, providing a sanctuary for learning.</p>
+                    </div>
+                </div>
             </div>
 
-            <div class="facilities-col car">
-                <img src="./eduford_img/basketball.png" alt="">
-                <h3>Athletic Excellence</h3>
-                <p>Our premier basketball playground, featuring state-of-art facilities, fosters athletic prowess and
-                    sportsmanship and fostering a love for the game..</p>
+
+            <div class="facilities-col">
+                <div class="facilities-col-inner">
+                    <div class="facilities-col-front">
+                        <img src="./eduford_img/basketball.png" alt="">
+                    </div>
+                    <div class="facilities-col-back">
+                        <h3>Athletic Excellence</h3>
+                        <p>Our premier basketball playground, featuring state-of-art facilities, fosters athletic
+                            prowess and
+                            sportsmanship and fostering a love for the game..</p>
+                    </div>
+                </div>
             </div>
 
-            <div class="facilities-col car">
-                <img src="./eduford_img/cafeteria.png" alt="">
-                <h3>Culinary Oasis of Diversity</h3>
-                <p>Our cafeteria offers a diverse range of global cuisines, fostering a welcoming atmosphere that
-                    nourishes both body and spirit.</p>
+            <div class="facilities-col">
+                <div class="facilities-col-inner">
+                    <div class="facilities-col-front">
+                        <img src="./eduford_img/cafeteria.png" alt="">
+                    </div>
+                    <div class="facilities-col-back">
+                        <h3>Culinary Oasis of Diversity</h3>
+                        <p>Our cafeteria offers a diverse range of global cuisines, fostering a welcoming atmosphere
+                            that
+                            nourishes both body and spirit.</p>
+                    </div>
+                </div>
             </div>
         </div>
     </section>
+
     <!-- testmonials -->
     <section class="testimonials">
         <h1>What Our Students Says</h1>

diff --git a/style.css b/style.css
@@ -75,7 +75,7 @@ nav img {
 
 .text-box {
     width: 90%;
-    color:#fff;
+    color: #fff;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -120,7 +120,7 @@ nav .fa-bars {
     display: none;
 }
 
-nav .fa-xmark{
+nav .fa-xmark {
     display: none;
 }
 
@@ -130,7 +130,7 @@ nav .fa-xmark{
         font-size: 20px;
     }
 
-    .nav-links ul li{
+    .nav-links ul li {
         display: block;
     }
 
@@ -288,33 +288,71 @@ h3 {
 }
 
 .facilities-col {
-    z-index: -1;
-    flex-basis: 31%;
-    border-radius: 10px;
-    margin-bottom: 5%;
-    text-align: left;
+    flex: 1 1 300px;
+    background-color: transparent;
+    margin: 30px;
+    height: 300px;
+    perspective: 1000px;
 }
 
-.facilities-col img {
+.facilities-col-inner{
+    position: relative;
     width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.6s;
+    transform-style: preserve-3d;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
-.facilities-col img:hover{
-    transform: scale(1.1);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+.facilities-col:hover .facilities-col-inner {
+    transform: rotateY(180deg);
 }
-.facilities-col p {
-    padding: 5px;
+
+.facilities-col-front,
+.facilities-col-back {
+    position: absolute;
+    width: 100%;
+    border-radius: 10px;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
 }
 
-.facilities-col h3 {
-    margin-top: 16px;
-    margin-bottom: 15px;
-    text-align: center;
+.facilities-col-front img {
+    width: 100%;
+    border-radius: 10px;
+    height: 100%;
+}
+
+.facilities-col-back {
+    background-color:#f44336;
+    color:#f0f0f0;
+    transform: rotateY(180deg);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
     padding: 10px;
+    text-align: center;
+}
+.facilities-col-back p,
+.facilities-col-back h3 {
+    transition: 0.3s;
+    transition-delay: 0.2s;
+    opacity: 0;
+    transform: translateY(30px);
+}
+.facilities-col:hover .facilities-col-back p,
+.facilities-col:hover .facilities-col-back h3{
+    transform: translateY(0);
+    opacity: 1;
+}
+
+.facilities-col-back p {
+    color: #fff3f3;
 }
 
 /* testimonials */