◄ Min  Size Fonts: + | - | ± Color: Max ►

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/
Loading...
XMake Image Comparison Slider just use CSS
Membuat image comparison slider full 100% menggunakan CSS
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE