Home >Web Front-end >JS Tutorial >Create a Stunning Bend & Reveal Hover Effect with Illusionistic Background Using HTML & CSS

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

DDDOriginal: 2024-12-03 22:36:11719browse

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bend & Reveal Effect</title>
  <style>
    * {
      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;
      }
    }
  </style>
</head>
<body>

<div>

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!

css html Object Filter using display position overflow margin padding border viewport background transform transition animation flex https

Statement：

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

Previous article：How to Create a Simple Countdown Timer Using Only JavaScript?Next article：How to Create a Simple Countdown Timer Using Only JavaScript?

See more

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

Related articles