Cartes de filtre CSS

3,943 pan4o

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 April 2024

Icônes sociales utilisant HTML et CSS

11 May 2026

Peurs des profondeurs

24 February 2026

Code HTML de la liste des icônes des réseaux sociaux

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>CSS Filter Cards</title>
  <div id="credits">Made by pan4o</div>
</head>

<body>

<a class="card" href="#">
        <div class="background"
          style="background-image: url(https://c.wallhere.com/photos/62/6c/1280x1920_px_clouds_forest_landscape_mist_mountains_nature_photography-1434897.jpg!d)">
        </div>
        <div class="content">
          <p class="category">Category</p>
          <h3 class="heading">Card Heading</h3>
        </div>
      </a>

<a class="card" href="#">
        <div class="background"
          style="background-image: url(https://krib.bg/wp-content/uploads/2024/05/city-4558069_1280-682x1024.jpg)">
        </div>
        <div class="content">
          <p class="category">Category</p>
          <h3 class="heading">Card Heading</h3>
        </div>
      </a>

<a class="card" href="#">
        <div class="background"
          style="background-image: url(https://e0.pxfuel.com/wallpapers/552/238/desktop-wallpaper-nature-cool-iphone-tip-1280x1920.jpg)">
        </div>
        <div class="content">
          <p class="category">Category</p>
          <h3 class="heading">Card Heading</h3>
        </div>
      </a>

<a class="card" href="#">
        <div class="background"
          style="background-image: url(https://e1.pxfuel.com/desktop-wallpaper/50/711/desktop-wallpaper-glow-please-city-aesthetic-iphone-tumblr-aesthetic-1280x1920-for-your-mobile-tablet-red-glow-aesthetic.jpg)">
        </div>
        <div class="content">
          <p class="category">Category</p>
          <h3 class="heading">Card Heading</h3>
        </div>
      </a>

</body>

</html>

CSS

*{
  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;
}