कार्ड प्रभाव

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

अनुशंसित

23 July 2024

CSS और चार्ट के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

21 August 2024

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
    <title>Card Hover Effect</title>
  </head>
  <body>
    <main>
      <div id="wand">
        <div class="cap"></div>
      </div>
      <div class="gallery">
        <div class="tile">
          <img src="https://i.pinimg.com/736x/3a/f5/09/3af5099c7c0608d2c3333b39eb0e7536.jpg" alt="image icon, literally" />
          <img
            class="tile-image"
            src="https://i.pinimg.com/236x/81/90/9a/81909a644a899de2546152630ea2ead1.jpg"
            alt="landscape image"
          />
        </div>
        <div class="tile">
          <img src="https://img.freepik.com/photos-gratuite/belle-fille-se-trouve-dans-parc_8353-5084.jpg?w=360" alt="image icon, literally" />
          <img
            class="tile-image"
            src="https://i.pinimg.com/236x/0e/ab/64/0eab640a805b90d9026f6e4b33c9ade1.jpg"
            alt="landscape image"
          />
        </div>
        <div class="tile">
          <img src="https://img.freepik.com/premium-photo/portrait-beautiful-woman-digital-painting-beautiful-girl_769803-147.jpg" alt="image icon, literally" />
          <img
            class="tile-image"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYWNLQafNNYway1XfKNE8DWuVI6jS0o-tTzTx56KxhzmMAwvycPbsIrH4qrVz3X3AIVag&usqp=CAU"
            alt="landscape image"
          />
        </div>
      </div>
    </main>
  </body>
</html>

CSS

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  height: 100vh;
  background: #061727;
}

img {
  max-width: 100%;
}

main {
  display: grid;
  place-items: center;
  height: 100%;
}

#wand {
  width: 100px;
  aspect-ratio: 1 / 10;
  background: linear-gradient(
    to right,
    rgb(26 44 28) 10%,
    rgb(42 40 44) 45% 55%,
    rgb(26 24 28) 90%
  );
  overflow: hidden;
  border-radius: 3vmin;
  box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%);
  position: absolute;
  left: 50%;
  top: 5%;
  translate: -50%;
  z-index: 100;
}

.cap {
  height: 20%;
  background: linear-gradient(
    to right,
    rgb(212 221 236) 10%,
    rgb(255 255 255) 45% 55%,
    rgb(212 221 236) 90%
  );
}

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.tile {
  aspect-ratio: 1;
  height: 400px;
  width: 400px;
  background: #1b2734;
  border-radius: 15%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 10px 20px -13px rgba(222, 222, 222, 0.75) inset;
  -webkit-box-shadow: 0px 10px 20px -13px rgba(222, 222, 222, 0.75) inset;
  -moz-box-shadow: 0px 10px 20px -13px rgba(222, 222, 222, 0.75) inset;
}
.tile-image {
  position: absolute;
  z-index: 2;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
}

.tile > .tile-image {
  opacity: var(--opacity);
  filter: blur(calc(var(--blur) * 10px));
}

कार्ड प्रभाव

अनुशंसित

एनिमेटेड लॉगिन और पंजीकरण

CSS और चार्ट के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

दीपक की रोशनी

HTML

CSS

JS

अनुशंसित

एनिमेटेड लॉगिन और पंजीकरण

CSS और चार्ट के साथ HTML एडमिन डैशबोर्ड टेम्पलेट

दीपक की रोशनी

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS