WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Cartes de filtre CSS
3134
pan4o
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
25 July 2025
Boîte d'inscription de connexion 3D HTML CSS
19 March 2025
Animation d'ombre de texte
26 March 2025
Page de destination pour une entreprise de vélos
HTML
Copy
CSS Filter Cards
Made by pan4o
Category
Card Heading
Category
Card Heading
Category
Card Heading
Category
Card Heading
CSS
Copy
*{ border: 0; margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100%; font-family: sans-serif; background: #e1e1e1; #credits {position: fixed; bottom: 10px; right: 10px; color: black; font-size: 12px; font-family: Arial, sans-serif;} } .container{ align-items: flex-start; display: flex; min-height: 100%; justify-content: center; padding: 64px 24px; } .card-grid{ display: grid; grid-column-gap: 24px; grid-row-gap: 24px; max-width: 1200px; width: 100%; } @media(min-width: 540px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } } @media(min-width: 960px){ .card-grid{ grid-template-columns: repeat(4, 1fr); } } .card{ position: relative; } .card:before{ content: ''; display: block; padding-bottom: 150%; width: 100%; } .background{ background-position: center; background-size: cover; border-radius: 24px; bottom: 0; filter: brightness(0.75) saturate(1.2) contrast(0.85); left: 0; position: absolute; right: 0; top: 0; transition: filter 200ms linear, transform 200ms linear; } .card:hover .background{ transform: scale(1.05); filter: none; } .card-grid:hover > .card:not(:hover) .background{ filter: brightness(0.6) saturate(1) contrast(1.2) blur(5px); } .card-grid:hover > .card:not(:hover) .content{ filter: brightness(0.8) blur(2px); } .content{ padding: 24px; position: absolute; top: 0; } .category{ color: #e1e1e1; font-size: 0.9rem; margin-bottom: 8px; text-transform: uppercase; } .heading{ color: #e1e1e1; font-size: 1.8rem; }
JS
Copy