├── README.md
├── assets
    ├── css
    │   └── styles.css
    ├── img
    │   ├── img1.png
    │   ├── img2.png
    │   └── img3.png
    └── scss
    │   ├── base
    │       └── _base.scss
    │   ├── components
    │       ├── _breakpoints.scss
    │       └── _card.scss
    │   ├── config
    │       └── _variables.scss
    │   └── styles.scss
├── index.html
└── preview.png


/README.md:
--------------------------------------------------------------------------------
 1 | # ⭐ CSS Card Hover Effects
 2 | ## [Watch it on youtube](https://youtu.be/91M9R9060XY)
 3 | ### ⭐ CSS Card Hover Effects
 4 | 
 5 | - CSS Card Hover Effects | HTML & CSS
 6 | - Responsive card with hover effects showing gradient elements.
 7 | - Developed first with the Mobile First methodology, then for desktop.
 8 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
 9 | 
10 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode)
11 | 
12 | ![preview img](/preview.png)
13 | 


--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
  1 | /*=============== GOOGLE FONTS ===============*/
  2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap");
  3 | /*=============== VARIABLES CSS ===============*/
  4 | :root {
  5 |   /*========== Colors ==========*/
  6 |   --title-color: #fff;
  7 |   --text-color: hsl(235, 20%, 57%);
  8 |   --shape-gradient: linear-gradient(90deg,
  9 |                   hsl(300, 76%, 60%),
 10 |                   hsl(57, 81%, 60%));
 11 |   --body-gradient: linear-gradient(180deg,
 12 |               hsl(22, 100%, 84%),
 13 |               hsl(265, 100%, 80%));
 14 |   --container-color: hsl(235, 32%, 10%);
 15 |   /*========== Font and typography ==========*/
 16 |   --body-font: "Poppins", sans-serif;
 17 |   --biggest-font-size: 2.25rem;
 18 |   --normal-font-size: 1.25rem;
 19 | }
 20 | 
 21 | /*=============== BASE ===============*/
 22 | * {
 23 |   box-sizing: border-box;
 24 |   padding: 0;
 25 |   margin: 0;
 26 | }
 27 | 
 28 | body {
 29 |   font-family: var(--body-font);
 30 |   color: var(--text-color);
 31 | }
 32 | 
 33 | img {
 34 |   max-width: 100%;
 35 |   height: auto;
 36 | }
 37 | 
 38 | /*=============== CARD ===============*/
 39 | .card {
 40 |   display: grid;
 41 |   place-items: center;
 42 |   background: var(--body-gradient);
 43 |   padding-block: 4.5rem;
 44 | }
 45 | .card__container {
 46 |   margin-inline: 1.5rem;
 47 |   display: grid;
 48 |   grid-template-columns: 1fr;
 49 |   row-gap: 2rem;
 50 | }
 51 | .card__article {
 52 |   position: relative;
 53 |   background-color: var(--container-color);
 54 |   padding: 2.5rem;
 55 |   border-radius: 2rem;
 56 |   text-align: center;
 57 |   box-shadow: 0 20px 24px hsla(235, 32%, 15%, 0.2);
 58 |   overflow: hidden;
 59 | }
 60 | .card__img {
 61 |   width: 250px;
 62 |   margin-bottom: 1rem;
 63 |   animation: float-img 2.5s ease-in-out infinite;
 64 | }
 65 | .card__title {
 66 |   color: var(--title-color);
 67 |   font-size: var(--biggest-font-size);
 68 |   line-height: 100%;
 69 |   margin-bottom: 1rem;
 70 | }
 71 | .card__description {
 72 |   font-size: var(--normal-font-size);
 73 | }
 74 | .card__data {
 75 |   position: relative;
 76 |   z-index: 10;
 77 | }
 78 | .card__shapes {
 79 |   display: grid;
 80 |   justify-items: center;
 81 |   row-gap: 2.5rem;
 82 |   position: absolute;
 83 |   inset: 0;
 84 |   top: -3.5rem;
 85 |   z-index: 1;
 86 | }
 87 | .card__shape {
 88 |   display: block;
 89 |   width: 260px;
 90 |   height: 40px;
 91 |   background: var(--shape-gradient);
 92 |   border-radius: 4rem;
 93 |   transform: rotate(-24deg);
 94 |   opacity: 0;
 95 | }
 96 | .card__shape:nth-child(1) {
 97 |   animation-delay: 0.1s;
 98 | }
 99 | .card__shape:nth-child(2) {
100 |   animation-delay: 0.2s;
101 | }
102 | .card__shape:nth-child(3) {
103 |   animation-delay: 0.3s;
104 | }
105 | .card__shape:nth-child(4) {
106 |   animation-delay: 0.4s;
107 | }
108 | .card__shape:nth-child(5) {
109 |   animation-delay: 0.5s;
110 | }
111 | .card__shape:nth-child(6) {
112 |   animation-delay: 0.6s;
113 | }
114 | .card__shape:nth-child(7) {
115 |   animation-delay: 0.7s;
116 | }
117 | .card__shape:nth-child(8) {
118 |   animation-delay: 0.8s;
119 | }
120 | 
121 | /* Animation img */
122 | @keyframes float-img {
123 |   0% {
124 |     transform: translateY(0);
125 |   }
126 |   50% {
127 |     transform: translateY(-0.75rem);
128 |   }
129 |   100% {
130 |     transform: translateY(0);
131 |   }
132 | }
133 | /* Animation shape */
134 | .card__article:hover .card__shape {
135 |   animation-name: shape-animate;
136 |   animation-duration: 0.8s;
137 |   animation-iteration-count: 2; /* infinite */
138 | }
139 | 
140 | @keyframes shape-animate {
141 |   0% {
142 |     opacity: 0;
143 |   }
144 |   20% {
145 |     opacity: 0.1;
146 |   }
147 |   40% {
148 |     opacity: 0.3;
149 |   }
150 |   60% {
151 |     opacity: 0.7;
152 |   }
153 |   80% {
154 |     opacity: 1;
155 |   }
156 |   100% {
157 |     opacity: 0;
158 |   }
159 | }
160 | /*=============== BREAKPOINTS ===============*/
161 | /* For small devices */
162 | @media screen and (max-width: 340px) {
163 |   .card__container {
164 |     margin-inline: 1rem;
165 |   }
166 |   .card__article {
167 |     padding: 1.5rem;
168 |   }
169 |   .card__img {
170 |     width: 160px;
171 |   }
172 |   .card__title {
173 |     font-size: 2rem;
174 |   }
175 | }
176 | /* For medium devices */
177 | @media screen and (min-width: 440px) {
178 |   .card__container {
179 |     grid-template-columns: 328px;
180 |   }
181 | }
182 | @media screen and (min-width: 768px) {
183 |   .card__container {
184 |     grid-template-columns: repeat(2, 328px);
185 |     column-gap: 2rem;
186 |   }
187 | }
188 | /* For large devices */
189 | @media screen and (min-width: 1024px) {
190 |   .card {
191 |     height: 100vh;
192 |   }
193 |   .card__container {
194 |     grid-template-columns: repeat(3, 328px);
195 |     column-gap: 2rem;
196 |   }
197 | }


--------------------------------------------------------------------------------
/assets/img/img1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-card-hover-effects/93737dae287aa43bec76f291c1ca327d77434cf8/assets/img/img1.png


--------------------------------------------------------------------------------
/assets/img/img2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-card-hover-effects/93737dae287aa43bec76f291c1ca327d77434cf8/assets/img/img2.png


--------------------------------------------------------------------------------
/assets/img/img3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-card-hover-effects/93737dae287aa43bec76f291c1ca327d77434cf8/assets/img/img3.png


--------------------------------------------------------------------------------
/assets/scss/base/_base.scss:
--------------------------------------------------------------------------------
 1 | /*=============== BASE ===============*/
 2 | *{
 3 |     box-sizing: border-box;
 4 |     padding: 0;
 5 |     margin: 0;
 6 | }
 7 | 
 8 | body{
 9 |     font-family: var(--body-font);
10 |     color: var(--text-color);
11 | }
12 | 
13 | img{
14 |     max-width: 100%;
15 |     height: auto;
16 | }


--------------------------------------------------------------------------------
/assets/scss/components/_breakpoints.scss:
--------------------------------------------------------------------------------
 1 | /*=============== BREAKPOINTS ===============*/
 2 | /* For small devices */
 3 | @media screen and (max-width: 340px){
 4 |     .card{
 5 |         &__container{
 6 |             margin-inline: 1rem;
 7 |         }
 8 |         &__article{
 9 |             padding: 1.5rem;
10 |         }
11 |         &__img{
12 |             width: 160px;
13 |         }
14 |         &__title{
15 |             font-size: 2rem;
16 |         }
17 |     }
18 | }
19 | 
20 | /* For medium devices */
21 | @media screen and (min-width: 440px){
22 |     .card__container{
23 |         grid-template-columns: 328px;
24 |     }
25 | }
26 | 
27 | @media screen and (min-width: 768px){
28 |     .card__container{
29 |         grid-template-columns: repeat(2, 328px);
30 |         column-gap: 2rem;
31 |     }
32 | }
33 | 
34 | /* For large devices */
35 | @media screen and (min-width: 1024px){
36 |     .card{
37 |         height: 100vh;
38 | 
39 |         &__container{
40 |             grid-template-columns: repeat(3, 328px);
41 |             column-gap: 2rem;
42 |         }
43 |     }
44 | }


--------------------------------------------------------------------------------
/assets/scss/components/_card.scss:
--------------------------------------------------------------------------------
  1 | /*=============== CARD ===============*/
  2 | .card{
  3 |     display: grid;
  4 |     place-items: center;
  5 |     background: var(--body-gradient);
  6 |     padding-block: 4.5rem;
  7 |     
  8 |     &__container{
  9 |         margin-inline: 1.5rem;
 10 |         display: grid;
 11 |         grid-template-columns: 1fr;
 12 |         row-gap: 2rem;
 13 |     }
 14 |     &__article{
 15 |         position: relative;
 16 |         background-color: var(--container-color);
 17 |         padding: 2.5rem;
 18 |         border-radius: 2rem;
 19 |         text-align: center;
 20 |         box-shadow: 0 20px 24px hsla(235, 32%, 15%, .2);
 21 |         overflow: hidden;
 22 |     }
 23 |     &__img{
 24 |         width: 250px;
 25 |         margin-bottom: 1rem;
 26 |         animation: float-img 2.5s ease-in-out infinite;
 27 |     }
 28 |     &__title{
 29 |         color: var(--title-color);
 30 |         font-size: var(--biggest-font-size);
 31 |         line-height: 100%;
 32 |         margin-bottom: 1rem;
 33 |     }
 34 |     &__description{
 35 |         font-size: var(--normal-font-size);
 36 |     }
 37 |     &__data{
 38 |         position: relative;
 39 |         z-index: 10;
 40 |     }
 41 |     &__shapes{
 42 |         display: grid;
 43 |         justify-items: center;
 44 |         row-gap: 2.5rem;
 45 |         position: absolute;
 46 |         inset: 0;
 47 |         top: -3.5rem;
 48 |         z-index: 1;
 49 |     }
 50 |     &__shape{
 51 |         display: block;
 52 |         width: 260px;
 53 |         height: 40px;
 54 |         background: var(--shape-gradient);
 55 |         border-radius: 4rem;
 56 |         transform: rotate(-24deg);
 57 |         opacity: 0;
 58 |         
 59 |         &:nth-child(1){
 60 |             animation-delay: .1s;
 61 |         }
 62 |         &:nth-child(2){
 63 |             animation-delay: .2s;
 64 |         }
 65 |         &:nth-child(3){
 66 |             animation-delay: .3s;
 67 |         }
 68 |         &:nth-child(4){
 69 |             animation-delay: .4s;
 70 |         }
 71 |         &:nth-child(5){
 72 |             animation-delay: .5s;
 73 |         }
 74 |         &:nth-child(6){
 75 |             animation-delay: .6s;
 76 |         }
 77 |         &:nth-child(7){
 78 |             animation-delay: .7s;
 79 |         }
 80 |         &:nth-child(8){
 81 |             animation-delay: .8s;
 82 |         }
 83 |     }
 84 | }
 85 | 
 86 | /* Animation img */
 87 | @keyframes float-img{
 88 |     0%{
 89 |         transform: translateY(0);
 90 |     }
 91 |     50%{
 92 |         transform: translateY(-.75rem);
 93 |     }
 94 |     100%{
 95 |         transform: translateY(0);
 96 |     }
 97 | }
 98 | 
 99 | /* Animation shape */
100 | .card__article:hover .card__shape{
101 |     animation-name: shape-animate;
102 |     animation-duration: .8s;
103 |     animation-iteration-count: 2; /* infinite */
104 | }
105 | 
106 | @keyframes shape-animate{
107 |     0%{
108 |         opacity: 0;
109 |     }
110 |     20%{
111 |         opacity: .1;
112 |     }
113 |     40%{
114 |         opacity: .3;
115 |     }
116 |     60%{
117 |         opacity: .7;
118 |     }
119 |     80%{
120 |         opacity: 1;
121 |     }
122 |     100%{
123 |         opacity: 0;
124 |     }
125 | }


--------------------------------------------------------------------------------
/assets/scss/config/_variables.scss:
--------------------------------------------------------------------------------
 1 | /*=============== GOOGLE FONTS ===============*/
 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');
 3 | 
 4 | /*=============== VARIABLES CSS ===============*/
 5 | :root{
 6 |     /*========== Colors ==========*/
 7 |     --title-color: #fff;
 8 |     --text-color: hsl(235, 20%, 57%);
 9 |     --shape-gradient: linear-gradient(90deg, 
10 |                     hsl(300, 76%, 60%),
11 |                     hsl(57, 81%, 60%));
12 |     --body-gradient: linear-gradient(180deg, 
13 |                 hsl(22, 100%, 84%),
14 |                 hsl(265, 100%, 80%));
15 |     --container-color: hsl(235, 32%, 10%);
16 | 
17 |     /*========== Font and typography ==========*/
18 |     --body-font: 'Poppins', sans-serif;
19 |     --biggest-font-size: 2.25rem;
20 |     --normal-font-size: 1.25rem;
21 | }


--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
1 | @import 'config/variables';
2 | @import 'base/base';
3 | @import 'components/card';
4 | @import 'components/breakpoints';


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |     <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">       
 6 | 
 7 |         <!--=============== CSS ===============-->
 8 |         <link rel="stylesheet" href="assets/css/styles.css">
 9 | 
10 |         <title>Responsive card hover effects - Bedimcode</title>
11 |     </head>
12 |     <body>
13 |         <div class="card">
14 |             <div class="card__container">
15 |                 <article class="card__article">
16 |                     <div class="card__data">
17 |                         <img src="assets/img/img1.png" alt="card image" class="card__img">
18 |     
19 |                         <h1 class="card__title">Shield & Shining Star</h1>
20 |                         <p class="card__description">Beautiful card, with hover effects</p>
21 |                     </div>
22 |     
23 |                     <div class="card__shapes">
24 |                         <span class="card__shape"></span>
25 |                         <span class="card__shape"></span>
26 |                         <span class="card__shape"></span>
27 |                         <span class="card__shape"></span>
28 |                         <span class="card__shape"></span>
29 |                         <span class="card__shape"></span>
30 |                         <span class="card__shape"></span>
31 |                         <span class="card__shape"></span>
32 |                     </div>
33 |                 </article>
34 |     
35 |                 <article class="card__article">
36 |                     <div class="card__data">
37 |                         <img src="assets/img/img2.png" alt="card image" class="card__img">
38 |     
39 |                         <h1 class="card__title">Fire Light Sword</h1>
40 |                         <p class="card__description">Beautiful card, with hover effects</p>
41 |                     </div>
42 |     
43 |                     <div class="card__shapes">
44 |                         <span class="card__shape"></span>
45 |                         <span class="card__shape"></span>
46 |                         <span class="card__shape"></span>
47 |                         <span class="card__shape"></span>
48 |                         <span class="card__shape"></span>
49 |                         <span class="card__shape"></span>
50 |                         <span class="card__shape"></span>
51 |                         <span class="card__shape"></span>
52 |                     </div>
53 |                 </article>
54 |     
55 |                 <article class="card__article">
56 |                     <div class="card__data">
57 |                         <img src="assets/img/img3.png" alt="card image" class="card__img">
58 |     
59 |                         <h1 class="card__title">Incoming Messages</h1>
60 |                         <p class="card__description">Beautiful card, with hover effects</p>
61 |                     </div>
62 |     
63 |                     <div class="card__shapes">
64 |                         <span class="card__shape"></span>
65 |                         <span class="card__shape"></span>
66 |                         <span class="card__shape"></span>
67 |                         <span class="card__shape"></span>
68 |                         <span class="card__shape"></span>
69 |                         <span class="card__shape"></span>
70 |                         <span class="card__shape"></span>
71 |                         <span class="card__shape"></span>
72 |                     </div>
73 |                 </article>
74 |             </div>
75 |         </div>
76 |     </body>
77 | </html>


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/responsive-card-hover-effects/93737dae287aa43bec76f291c1ca327d77434cf8/preview.png


--------------------------------------------------------------------------------