.before-after-container { position: relative; width: 100%; height: 330px; overflow: hidden; } .before-image, .after-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .before-image img, .after-image img { width: 100%; height: 100%; object-fit: cover; } .after-image { clip-path: inset(0 50% 0 0); } .slider { position: absolute; top: 0; left: 50%; width: 8px; height: 100%; background-color: white; z-index: 2; cursor: grab; transform: translateX(-50%); } .slider:active { cursor: grabbing; } .slider { position: absolute; top: 0; left: 50%; width: 8px; height: 100%; background-color: #778e6f; z-index: 2; cursor: grab; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; } .slider::before { content: "❮\00a0❯"; font-size: 22px; color: #FFFFFF; background-color: #778e6f; padding: 5px 7px; border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); user-select: none; }