feat: add card hover effect

Ritika-Agrawal811 · Jan 1, 2024 · bb8cb99 · bb8cb99
1 parent 0e1c860
commit bb8cb99
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/Hover Effects/Cards_Image_Zoom/index.html → Hover Effects/Card_Image_Zoom/index.html b/Hover Effects/Cards_Image_Zoom/index.html → Hover Effects/Card_Image_Zoom/index.html
@@ -11,7 +11,7 @@
       <figure>
         <img
           src="https://res.cloudinary.com/djix6uusx/image/upload/v1631022728/stationary_xokjyb.jpg"
-          alt="Colosseum"
+          alt="writing pads and diaries"
         />
       </figure>
       <div class="card__content">

diff --git a/Hover Effects/Cards_Image_Zoom/style.css → Hover Effects/Card_Image_Zoom/style.css b/Hover Effects/Cards_Image_Zoom/style.css → Hover Effects/Card_Image_Zoom/style.css
@@ -17,7 +17,7 @@ body {
 }
 
 .card {
-  width: min(95%, 300px);
+  width: 18em;
   border-radius: 0.5em;
   cursor: pointer;
 }
@@ -52,14 +52,12 @@ img {
 .card__content::before {
   content: "";
   position: absolute;
-  left: 50%;
+  left: 0;
   bottom: 0;
   width: 100%;
   height: 0;
   border-radius: 50% 50% 0.5em 0.5em;
   background-color: #fff;
-  transform: translateX(-50%);
-  transform-origin: 50% 100%;
   transition:
     height 300ms ease-in-out,
     border-radius 300ms ease-in-out;

diff --git a/Hover Effects/README.md b/Hover Effects/README.md
@@ -13,6 +13,7 @@ Here is a collection of subtle yet attractive hover effects examples for you!
 - [Focus Image on Hover Effect](#focus-image-on-hover-effect-zap)
 - [Button Background Rotate Hover Effect](#button-background-rotate-hover-effect-zap)
 - [Button Wave Animation](#button-wave-animation-zap)
+- [Card Hover Effect](#card-hover-effect-zap)
 
 ### Button Border Fill Up Hover Effect :zap:
 
@@ -93,3 +94,12 @@ A Button Wave Animation made using CSS transform and z-index properties on pseud
 
 <br/>
 <img src="https://drive.google.com/uc?export=view&id=1vUiTOz7zWeCCcgmCUh2ZDs87BA_d5NZN" width="85%" height="85%"/>
+
+### Card Hover Effect :zap:
+
+A Card Hover Effect when the image zooms in and a white background fills behind the content, also changing content's color! <br/>
+:paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Hover%20Effects/Card_Image_Zoom).
+
+<br/>
+<img src="https://drive.google.com/uc?export=view&id=1FR_kkdpPdxUBD7U_DDcJl5yGmMCQ-NaI" width="85%" height="85%"/>
+