Ethereum hover card

Open In Editor Publish Your Code Need a Website?

<div class="container">
    <div class="card">
      <svg class="img" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1"
        shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality"
        fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 784.37 1277.39" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Layer_x0020_1">
          <metadata id="CorelCorpID_0Corel-Layer"></metadata>
          <g id="_1421394342400">
            <g>
              <polygon fill="#343434" fill-rule="nonzero"
                points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"></polygon>
              <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33">
              </polygon>
              <polygon fill="#3C3C3B" fill-rule="nonzero"
                points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"></polygon>
              <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89"></polygon>
              <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33"></polygon>
              <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33"></polygon>
            </g>
          </g>
        </g>
      </svg>
      <div class="textBox">
        <p class="text head">Ethereum</p>
        <span>Cryptocurrency</span>
        <p class="text price">$2,919.87</p>
      </div>
    </div>

</div>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #212121; 
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; 
}
.card {
    width: 195px;
    height: 285px;
    background: #313131;
    border-radius: 20px;
    ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    transition: 0.2s ease-in-out;
  }
  
  .img {
    height: 30%;
    position: absolute;
    transition: 0.2s ease-in-out;
    z-index: 1;
  }
  
  .textBox {
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: 0.2s ease-in-out;
    z-index: 2;
  }
  
  .textBox > .text {
    font-weight: bold;
  }
  
  .textBox > .head {
    font-size: 20px;
  }
  
  .textBox > .price {
    font-size: 17px;
  }
  
  .textBox > span {
    font-size: 12px;
    color: lightgrey;
  }
  
  .card:hover > .textBox {
    opacity: 1;
  }
  
  .card:hover > .img {
    height: 65%;
    filter: blur(7px);
    animation: anim 3s infinite;
  }
  
  @keyframes anim {
    0% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-20px);
    }
  
    100% {
      transform: translateY(0);
    }
  }
  
  .card:hover {
    transform: scale(1.04) rotate(-1deg);
  }

Ethereum hover card

Recommended

Button Hover Animation

3D Card Hover Effect

Icon Hover Effect

HTML

CSS

JS

Recommended

Button Hover Animation

3D Card Hover Effect

Icon Hover Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS