CSS Filter cards

Open In Editor Publish Your Code

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

CSS Filter cards

Recommended

CSS Pulse Loader

CSS Login Form

Navbar Template Html CSS

HTML

CSS

JS

Recommended

CSS Pulse Loader

CSS Login Form

Navbar Template Html CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS