Gallery slide reveal animation | HTML, CSS & JavaScript

.gallery-wrapper {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding: 40px;
  background: #f4f4f4;
}

.gallery-item {
  position: relative;
  width: 220px;
  height: 320px;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* The Image - Hidden behind or slightly scaled */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale(1.2); /* Image starts slightly zoomed */
}

/* The Color Layer - Slides out */
.color-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.color-layer span {
  color: white;
  font-family: 'Arial', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Colors */
.bg-purple { background-color: #8e44ad; }
.bg-blue   { background-color: #2980b9; }
.bg-green  { background-color: #27ae60; }
.bg-yellow { background-color: #f39c12; }

/* --- Hover Effects --- */

/* Slide the color out to the right */
.gallery-item:hover .color-layer {
  transform: translateX(100%);
}

/* Zoom the image into view */
.gallery-item:hover img {
  transform: scale(1);
}

- Gallery slide reveal animation

Live Preview