Skip to content
STYLESCAPE

Image Compare

Examples for the ss-c-image-compare module and ImageCompareSlider. The script keeps --ss-image-compare-position on the container in sync with the handle, which becomes a keyboard slider (role="slider"; arrows, Page Up/Down, Home/End). Without the script the split stays at the authored position. The older .image__compare class names still work.

Default

The valley at night The valley by day
HTML 
<figure class="ss-c-image-compare" data-ss="image-compare">
            <img class="ss-c-image-compare__image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Crect width='600' height='300' fill='%231b2433'/%3E%3Ccircle cx='450' cy='90' r='34' fill='%23e8e6d8'/%3E%3Cpath d='M0 300 L170 120 L300 250 L420 160 L600 300Z' fill='%232b3d33'/%3E%3C/svg%3E" alt="The valley at night" width="600" height="300">
            <img class="ss-c-image-compare__overlay" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Crect width='600' height='300' fill='%23bcd7e6'/%3E%3Ccircle cx='450' cy='90' r='40' fill='%23f2c14e'/%3E%3Cpath d='M0 300 L170 120 L300 250 L420 160 L600 300Z' fill='%234f7c5a'/%3E%3C/svg%3E" alt="The valley by day" width="600" height="300">
            <div class="ss-c-image-compare__handle" role="slider" tabindex="0" aria-label="Day/night split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>
            <span class="ss-c-image-compare__label ss-c-image-compare__label--before" aria-hidden="true">Day</span>
            <span class="ss-c-image-compare__label ss-c-image-compare__label--after" aria-hidden="true">Night</span>
        </figure>

Initial position

Night Day
HTML 
<figure class="ss-c-image-compare" data-ss="image-compare" data-ss-image-compare-position="30" style="--ss-image-compare-position: 30%; max-width: 24rem">
            <img class="ss-c-image-compare__image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Crect width='600' height='300' fill='%231b2433'/%3E%3Ccircle cx='450' cy='90' r='34' fill='%23e8e6d8'/%3E%3Cpath d='M0 300 L170 120 L300 250 L420 160 L600 300Z' fill='%232b3d33'/%3E%3C/svg%3E" alt="Night" width="600" height="300">
            <img class="ss-c-image-compare__overlay" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300'%3E%3Crect width='600' height='300' fill='%23bcd7e6'/%3E%3Ccircle cx='450' cy='90' r='40' fill='%23f2c14e'/%3E%3Cpath d='M0 300 L170 120 L300 250 L420 160 L600 300Z' fill='%234f7c5a'/%3E%3C/svg%3E" alt="Day" width="600" height="300">
            <div class="ss-c-image-compare__handle" role="slider" tabindex="0" aria-label="Day/night split" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"></div>
        </figure>