├── Card Hover ├── img │ ├── card 01.jpg │ ├── card 02.jpg │ ├── card 03.jpg │ └── card 04.jpg ├── index.html └── style.css └── README.md /Card Hover/img/card 01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sahan-99/Card-hover-effect/bf90536dd3b3f2625c2d9a36e72df13ad24a910c/Card Hover/img/card 01.jpg -------------------------------------------------------------------------------- /Card Hover/img/card 02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sahan-99/Card-hover-effect/bf90536dd3b3f2625c2d9a36e72df13ad24a910c/Card Hover/img/card 02.jpg -------------------------------------------------------------------------------- /Card Hover/img/card 03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sahan-99/Card-hover-effect/bf90536dd3b3f2625c2d9a36e72df13ad24a910c/Card Hover/img/card 03.jpg -------------------------------------------------------------------------------- /Card Hover/img/card 04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sahan-99/Card-hover-effect/bf90536dd3b3f2625c2d9a36e72df13ad24a910c/Card Hover/img/card 04.jpg -------------------------------------------------------------------------------- /Card Hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Card Hover Effect 4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 | card 16 |
17 |
18 |

Your Topic Here


19 |

Type your contain and other all description here

20 |
21 |
22 |
23 |
24 |
25 |
26 | card 27 |
28 |
29 |

Your Topic Here


30 |

Type your contain and other all description here

31 |
32 |
33 |
34 |
35 |
36 |
37 | card 38 |
39 |
40 |

Your Topic Here


41 |

Type your contain and other all description here

42 |
43 |
44 |
45 |
46 |
47 |
48 | card 49 |
50 |
51 |

Your Topic Here


52 |

Type your contain and other all description here

53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 | -------------------------------------------------------------------------------- /Card Hover/style.css: -------------------------------------------------------------------------------- 1 | .card-wrapper { 2 | display: block; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | 7 | .card { 8 | width: 100%; 9 | height: 350px; 10 | border-radius: 20px; 11 | overflow: hidden; 12 | } 13 | 14 | 15 | .card:not(:last-child) { 16 | margin-right: 20px; 17 | } 18 | .card img { 19 | width: 100%; 20 | height: 100%; 21 | object-fit: cover; 22 | border-radius: 20px; 23 | transition: .5s all linear; 24 | } 25 | .card-text { 26 | position: absolute; 27 | content: ""; 28 | top: 100%; 29 | left: 0; 30 | padding: 0px 20px; 31 | height: 100%; 32 | transition: .5s all linear; 33 | } 34 | .card-text h3 , .card-text p { 35 | color: #ffffff; 36 | } 37 | .card-text h3 { 38 | letter-spacing: 3px; 39 | margin-top: 20px; 40 | } 41 | .card:hover .card-text { 42 | top: 0%; 43 | background: #ff0000; 44 | backdrop-filter: blur(2px); 45 | 46 | } 47 | .card:hover img { 48 | transform: scale(1.1,1.1); 49 | 50 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Screenshot (45)](https://github.com/user-attachments/assets/7f6fff41-7f7a-40c1-a30d-f53673334d36) 2 | --------------------------------------------------------------------------------