.comparison-container {
  position: relative;
  width: 500px; /* Adjust according to your image's width */
  height: auto;
}

.comparison-image {
  display: block;
  width: 100%;
  height: auto;
}

.comparison-mask {
  position: absolute;
  top: 0;
  width: 50%; /* Initial state, showing half before and half after */
  height: 100%;
  overflow: hidden;
  transition: width 0.4s ease;
}

.comparison-slider {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  width: 10px; /* Slider width */
  height: 100%;
  background: #2196f3;
  cursor: ew-resize;
}