सीएसएस फ़िल्टर कार्ड

3568 pan4o

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

29 August 2024

उत्पाद कार्ड की दुकान

16 July 2025

प्रकाश तारों और सीढ़ियों के साथ सीएसएस स्टेज

22 November 2025

सीएसएस लिक्विड ग्लास बटन होवर प्रभाव

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

अनुशंसित

उत्पाद कार्ड की दुकान

प्रकाश तारों और सीढ़ियों के साथ सीएसएस स्टेज

सीएसएस लिक्विड ग्लास बटन होवर प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS