Create a Stunning Bend & Reveal Hover Effect with Illusionistic Background Using HTML & CSS-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Create a Stunning Bend & Reveal Hover Effect with Illusionistic Background Using HTML & CSS

Dec 03, 2024 pm 10:36 PM

Create a Stunning Bend & Reveal Hover Effect with Illusionistic Background Using HTML & CSS

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Bend &amp; Reveal Effect&lt;/title&gt;
  &lt;style&gt;
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #1e1e1e, #3c3c3c);
      overflow: hidden;
      font-family: Arial, sans-serif;
    }
    .container {
      position: relative;
      width: 300px;
      height: 400px;
      perspective: 1200px;
      overflow: visible;
    }

    /* Illusionistic glowing grid background */
    .illusion-bg {
      position: absolute;
      top: -20px;
      left: -20px;
      width: calc(100%   40px);
      height: calc(100%   40px);
      background: repeating-linear-gradient(45deg,
       rgba(255, 255, 255, 0.1) 0 5px, transparent 5px 10px);
      border-radius: 15px;
      box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.05),
       0 0 30px rgba(0, 255, 255, 0.5);
      z-index: -1;
      filter: blur(5px);
    }

    .image-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      transform-origin: center bottom;
      transition: transform 0.8s ease, box-shadow 0.8s ease, filter 0.6s ease;
      border-radius: 15px;
      overflow: hidden;
      z-index: 1;
    }
    .image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 15px;
      filter: brightness(80%);
      transition: filter 0.8s ease;
    }

    .reveal-png {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('./removebg.png') no-repeat center;
      background-size: cover;
      opacity: 0;
      transform: translateY(50px) scale(0.9);
      transition: opacity 0.8s ease, transform 0.8s ease, filter 0.6s ease;
      filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9));
    }

    /* Hover Effects */
    .container:hover .image-wrapper {
      transform: rotateX(-70deg) scale(1.05);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
      filter: hue-rotate(30deg);
    }

    .container:hover .image-wrapper img {
      filter: brightness(100%) saturate(1.2);
    }

    .container:hover .reveal-png {
      z-index: 1;
      opacity: 1;
      transform: translateY(0) scale(1.06);
      filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
    }

    .container:hover .illusion-bg {
      animation: pulse 2s infinite alternate ease-in-out;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }
      100% {
        transform: scale(1.05);
        opacity: 1;
      }
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div&gt;

Copy after login

The above is the detailed content of Create a Stunning Bend & Reveal Hover Effect with Illusionistic Background Using HTML & CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn