CSS image split animation | HTML, CSS & JavaScript

:root {
  --anim-speed: 0.6s;
  --anim-curve: cubic-bezier(0.25, 1, 0.5, 1); /* Sleek ease-out */
  --split-distance: 60%; /* How far the pieces slide out */
  --img-url: url('https://picsum.photos/id/1067/800/500'); /* Replace with your image */
}

/* Container setup */
.split-container {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  background: #111; /* Background color of the reveal area */
}

/* Center content behind the image */
.reveal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 1;
  font-family: 'Arial Black', sans-serif;
  letter-spacing: 4px;
}

/* Shared styles for both halves */
.split-half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-image: var(--img-url);
  background-size: 1200px 400px; /* Double the width of the container */
  background-repeat: no-repeat;
  z-index: 2;
  transition: transform var(--anim-speed) var(--anim-curve);
}

/* Left Half Logic */
.split-half.left {
  left: 0;
  background-position: left center;
  /* Origin point for 3D/Angle modifications if needed later */
  transform-origin: left center; 
}

/* Right Half Logic */
.split-half.right {
  right: 0;
  /* Offset the background to align perfectly with the left half */
  background-position: right center; 
  transform-origin: right center;
}

/* Hover Animations */
.split-container:hover .split-half.left {
  transform: translateX(calc(-1 * var(--split-distance)));
}

.split-container:hover .split-half.right {
  transform: translateX(var(--split-distance));
}

- CSS image split animation

Live Preview