Hologram Effect HTML CSS

Go to file

Gerald-Ha a6b777571e Aktualisiere README.md		2024-07-11 11:50:42 +02:00
img	Initial commit	2024-07-11 11:35:34 +02:00
index.html	Initial commit	2024-07-11 11:35:34 +02:00
README.md	Aktualisiere README.md	2024-07-11 11:50:42 +02:00
style.css	Initial commit	2024-07-11 11:35:34 +02:00

README.md

Hologram Effect HTML CSS

I have written a HTML & CSS code for a nice hologram effect that you can use for your website.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Holo Effekt</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      :root {
        --timing: 400ms;
        --rotation: 20deg;
      }

      html {
        color-scheme: dark;
      }

      body {
        display: grid;
        place-content: center;
        min-height: 100vh;
        perspective: 1000px;
      }

      img {
        max-width: 100%;
      }

      .pk {
        width: 300px;
        aspect-ratio: 9 / 16;
        /* background-image: url("/img/card.jpg"); */
        position: relative;
        transform-style: preserve-3d;
        transition: rotate var(--timing) ease;
      }

      .pk:hover {
        rotate: x var(--rotation);
      }

      .pk::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 100;
        /* background-image: radial-gradient(circle, transparent 150px, black); */
        opacity: 0;
        transition: opacity var(--timing);
      }

      .pk:hover::before {
        opacity: 1;
      }

      .pk::after {
        content: "";
        position: absolute;
        inset: 80% 0.5rem 0.5rem;
        translate: 0;
        transform: translateZ(-100px);
        background: black;
        filter: blur(1rem);
        z-index: 1;
        transition: rotate var(--timing), translate var(--timing);
      }

      .pk:hover::after {
        rotate: x calc(var(--rotation) * -1);
        translate: 0 60px;
      }

      .bg-image {
        position: absolute;
        z-index: 10;
        max-width: 100%;
        max-height: 100%;
        background-size: auto;
        background-position: center;
        background-repeat: no-repeat;
      }

      .logo,
      .front-image {
        position: absolute;
      }

      .logo {
        z-index: 1000;
        filter: invert(1);
        width: 65%;
        margin-inline: auto;
        inset: auto 0 2rem;
        transform: translateY(0rem) translateZ(20px);
        transition: var(--timing);
      }

      .pk:hover .logo {
        transform: translateY(-2rem) translateZ(20px);
        rotate: x calc(var(--rotation) * -1);
      }

      .front-image {
        scale: 1.125;
        transform-origin: bottom;
        opacity: 0;
        z-index: 100;
        transition: var(--timing);
      }

      .pk:hover .front-image {
        opacity: 1;
        transform: translateY(-2rem) translateZ(-10px);
        rotate: x calc(var(--rotation) * -1);
      }

      .inspiration {
        font-family: system-ui;
        text-align: center;
        max-width: 25ch;
        -webkit-margin-before: 3rem;
        margin-block-start: 3rem;
        margin-inline: auto;
      }
    </style>
  </head>
  <body>
    <!-- partial:index.partial.html -->
    <div class="pk">
      <img
        class="front-image"
        src="https://gerald-hasani.com/wp-content/uploads/2024/07/mewtwo.png"
        alt="Here your Text"
      />
      <img
        class="bg-image"
        src="https://gerald-hasani.com/wp-content/uploads/2024/07/card.jpg"
        alt="Here your Text"
      />
    </div>

    <!-- partial -->
  </body>
</html>