Carte de survol Ethereum

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

23 May 2025

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

Carte de survol Ethereum

Recommandé

Un code par creativearray554

Effet de brouillage de texte

Un code par hanyhelmy119

HTML

CSS

JS

Recommandé

Un code par creativearray554

Effet de brouillage de texte

Un code par hanyhelmy119

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS