reveal effect

2,461 alqsdeus

Open In Editor Publish Your Code

reveal effect

Recommended

30 September 2025

CSS Sphere Animation with Hover Effects

30 March 2025

Glass effect social media buttons with neon glow

8 September 2025

CSS Text Animation: Echo Effect

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #305271, #99b5f0);
  font-family: 'Poppins', sans-serif;

.container {
  position: relative;
  width: 80%;
  max-width: 1000px;
  height: 600px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.container:hover {
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.6);
  transform: scale(1.02);
}

.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease-in-out;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(85%);
  transition: filter 0.3s ease-in-out;
}

.second-image {
  width: 50%;
  overflow: hidden;
  transition: width 0.5s ease-in-out;
}

#slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(6px);
  cursor: ew-resize;
  transition: left 0.3s ease;
  z-index: 3;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slider:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
  background-size: 150px 150px;
  opacity: 0.2; 
  animation: moveStars 25s linear infinite;
  z-index: 1;
}

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

@keyframes moveStars {
  from {
      background-position: 0 0;
  }
  to {
      background-position: 100% 100%;
  }
}}

JS