Tarjetas de filtro CSS

Abrir en el editor Video Publica tu código

Recomendado

18 February 2024

Página de inicio de React Netflix

11 July 2024

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

Tarjetas de filtro CSS

Recomendado

Generador de Imágenes

Página de inicio de React Netflix

Efecto brillante de neón

HTML

CSS

JS

Recomendado

Generador de Imágenes

Página de inicio de React Netflix

Efecto brillante de neón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS