Create Images Sliding Panels With CSS

Kali ini utta akan mencoba membuat sliding panel with css, dan beberapa waktu lalu saya juga sudah menyinggung tentang 'Beragam Macam Slide Image With jQuery'.  jadi yang disebut Image Sliding Panels sebenarnya cara lain untuk menciptakan slideshow dengan berbagai efek ditambahkan dan teks yang dikembangkan oleh codrops dan akhir menggunakan CSS3.

Mungkin ini akan menjadi sedikit rumit, tapi hasilnya menarik gan, dan ada beberapa demo 1, 2, 3, 4, berbeda dalam animasi karena pada dasarnya struktur yang sama.

<style>.cr-container {border: 10px solid #FFF;height: 400px;margin: 0 auto;overflow: hidden;position: relative;width: 600px;} .cr-container br {display:none;} .cr-container label {color: #98541C;cursor: pointer;float: left;font-size: 30px;height: 32px;line-height:30px;margin-top: 350px;position: relative;text-align: center;width: 150px;z-index: 1000;} .cr-container label:before {background: rgba(255, 255, 255, 0.7);border-radius: 50%;box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);content: "";height: 32px;left: 50%;margin-left: -16px;position: absolute;width: 32px;z-index: -1;} .cr-container label:after{ background: -moz-linear-gradient(#FFF,#000,#FFF); background: -webkit-linear-gradient(#FFF,#000,#FFF); background: -o-linear-linear-gradient(#FFF,#000,#FFF); background: -ms-linear-linear-gradient(#FFF,#000,#FFF); background: linear--linear-gradient(#FFF,#000,#FFF); bottom: -20px; content: ''; height: 400px; position: absolute; right: 0px; width: 1px;} .cr-container label.cr-label-img-4:after{ width: 0px;} .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4 { color: #000;} .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before { background: #FFF;box-shadow: 0 0 0 4px rgba(0,0,0, 0.5);} .cr-container input{display: none;} .cr-bgimg {width: 600px;height: 400px;position: absolute;left: 0px;top: 0px;z-index: 1;background-repeat: no-repeat;background-position: 0 0;} .cr-bgimg div {width: 150px;height: 100%;position: relative;float: left;overflow: hidden;background-repeat: no-repeat;} .cr-bgimg div span {position: absolute;width: 100%;height: 100%;top: 0px;left: 150px;z-index: 2;text-indent: -9000px;} .cr-bgimg div:nth-child(odd) span {left: -150px;}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(1) { background-image: url(URL-GAMBAR1);}

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(2){ background-image: url(URL-GAMBAR2);}

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(3){ background-image: url(URL-GAMBAR3);}

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(4){ background-image: url(URL-GAMBAR4);}

.cr-bgimg div:nth-child(1) span {background-position: 0px 0px;} .cr-bgimg div:nth-child(2) span {background-position: -150px 0px;} .cr-bgimg div:nth-child(3) span {background-position: -300px 0px;} .cr-bgimg div:nth-child(4) span {background-position: -450px 0px;} .cr-container input:checked ~ .cr-bgimg div span{ -webkit-animation: slideOutRight 0.6s ease-in-out; -moz-animation: slideOutRight 0.6s ease-in-out; -o-animation: slideOutRight 0.6s ease-in-out; -ms-animation: slideOutRight 0.6s ease-in-out; animation: slideOutRight 0.6s ease-in-out;} @-webkit-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @-moz-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @-o-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @-ms-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} .cr-container input:checked ~ .cr-bgimg div:nth-child(even) span { -webkit-animation: slideOutLeft 0.6s ease-in-out; -moz-animation: slideOutLeft 0.6s ease-in-out; -o-animation: slideOutLeft 0.6s ease-in-out; -ms-animation: slideOutLeft 0.6s ease-in-out; animation: slideOutLeft 0.6s ease-in-out;} @-webkit-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @-moz-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @-o-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @-ms-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {-webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; -ms-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; left: 0px; z-index: 10;} .cr-titles h3 {font-weight: normal;} .cr-titles h3 span { z-index: 10000; position: absolute; width: 100%; left: 0px; text-align: center; opacity: 0; top: 50%;} .cr-titles h3 span.big {color: #FFF;font-family: Helvetica;font-size: 60px;letter-spacing: -2px;text-shadow: 1px 2px 1px #000; left: 0px;top: 230px; -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out, -o-transform 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out, -ms-transform 0.8s ease-in-out; transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;} .cr-titles h3 span.small {background: rgba(255, 255, 255, 0.7);color: #000;font-family: Tahoma;font-size: 14px;letter-spacing: 0;margin-top: 100px;opacity: 0;padding: 5px 0;text-shadow: 1px 1px 1px #FFF; -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out;} .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5);} .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);} .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){opacity: 1;}</style>

<div class="cr-container"><input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/><label for="select-img-1" class="cr-label-img-1">1</label><input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" /><label for="select-img-2" class="cr-label-img-2">2</label><input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" /><label for="select-img-3" class="cr-label-img-3">3</label><input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" /><label for="select-img-4" class="cr-label-img-4">4</label><div class="clr"></div><div class="cr-bgimg"><div><span>Slice 1 - Image 1</span><span>Slice 1 - Image 2</span><span>Slice 1 - Image 3</span><span>Slice 1 - Image 4</span></div><div><span>Slice 2 - Image 1</span><span>Slice 2 - Image 2</span><span>Slice 2 - Image 3</span><span>Slice 2 - Image 4</span></div><div><span>Slice 3 - Image 1</span><span>Slice 3 - Image 2</span><span>Slice 3 - Image 3</span><span>Slice 3 - Image 4</span></div><div><span>Slice 4 - Image 1</span><span>Slice 4 - Image 2</span><span>Slice 4 - Image 3</span><span>Slice 4 - Image 4</span></div></div><div class="cr-titles">
<h3>
<span class="big" style="color:#000;text-shadow:2px 2px 2px #FFF;letter-spacing:2px;font-family:Georgia;">JUDUL-1</span><span class="small">Keterangan Gambar</span>
</h3>
<h3>
<span class="big" style="color:#000;text-shadow:2px 2px 2px #FFF;letter-spacing:2px;font-family:Georgia;">JUDUL-2</span><span class="small">Keterangan Gambar</span>
</h3>
<h3>
<span class="big" style="color:#000;text-shadow:2px 2px 2px #FFF;letter-spacing:2px;font-family:Georgia;">JUDUL-3</span><span class="small">Keterangan Gambar</span>
</h3>
<h3>
<span class="big" style="color:#000;text-shadow:2px 2px 2px #FFF;letter-spacing:2px;font-family:Georgia;">JUDUL-4</span><span class="small">Keterangan Gambar</span>
</h3>
</div>
</div>

{[['', '']]}