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

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

अनुशंसित

20 August 2024

फ़्लिपिंग कार्ड का मूल्य निर्धारण

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

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

अनुशंसित

फ़्लिपिंग कार्ड का मूल्य निर्धारण

कार्ड एनिमेशन

भुगतान कार्ड

HTML

CSS

JS

अनुशंसित

फ़्लिपिंग कार्ड का मूल्य निर्धारण

कार्ड एनिमेशन

भुगतान कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS