Make Image Comparison Slider just use CSS

Ketika melongok web mbater (sebutan master buat yg cewek) Lea Verou, ada artikel tentang image comparison slider with pure CSS lea.verou.me/2014/07/image-comparison-slider-with-pure-css Sebuah trik tutorial seputaran image, fungsi utama yaitu membandingkan 2 buah gambar dengan gaya slider hanya menggunakan CSS! Begitulah kira² penjelasan versi AA Koben ;)) Apabila sobat mempunyai 2 gambar dan bermaksud membandingkannya, tidak perlu satu per satu menampilkan tetapi bisa memakai trick ini!
Lihat demo

codepen.io/beben-koben/full/JKzyf

Kode CSS pada sumber tidak berjalan bagus pada browser mozilla, sehingga saya harus turun tangan :D Ternyata masih ada kendala jg setelah gue turun-tangan, width (panjang) slider berbeda pula ketika di patok dengan nominal 50% #:-S Oleh karena itu width terpaksa diberikan dengan nilai 25px

.image-slider {
 line-height: 0;
 position:relative;
 display: inline-block;
}
.image-slider img {
 user-select: none;
 max-width: 400px;
}
.image-slider > div {
 position: absolute;
 top: 0; 
 left: 0;
 bottom: 0; 
 width: 25px; /* I mean this nominal, try to substitute with 52% and see in google chrome */
 max-width: 100%;
 overflow: hidden;
 resize: horizontal;
}
.image-slider > div:before {
 content: '';
 display: block;
 width: 13px; 
 height: 13px;
 overflow: hidden;
 position: absolute;
 resize: horizontal;
 right: 3px; bottom: 3px;
 background-clip: content-box;
 background: linear-gradient(-45deg, black 50%, transparent 0);
 -webkit-filter: drop-shadow(0 0 2px black);
 filter: drop-shadow(0 0 2px black);
}

Perhatikan property width: 25px; pada class attribute .image-slider > div Jika nominal di ganti dengan 52%, efek slider akan bisa mentok sampe ujung kiri & kanan (mozilla) tidak berjalan mulus pada google chrome. Maka dari itu nominal di beri nilai 25px agar bisa mentok kiri pada chrome.

Markup HTML<div class="image-slider">
<div><img src="IMAGE-BEFORE.jpg" alt="" /></div>
<img src="IMAGE-AFTER.jpg" alt="" />
</div>

Bonus: www.webdesigncrowd.com/sliding-jquery-image-divider

Happy coding \m/