Payament
Free Photos
WordPress Themes

CSS Image Slider

HTML
<div id="slideshow-wrap"> <input type="radio" id="button-1" name="controls" checked="checked"/> <label for="button-1"></label> <input type="radio" id="button-2" name="controls"/> <label for="button-2"></label> <input type="radio" id="button-3" name="controls"/> <label for="button-3"></label> <input type="radio" id="button-4" name="controls"/> <label for="button-4"></label> <input type="radio" id="button-5" name="controls"/> <label for="button-5"></label> <label for="button-1" class="arrows" id="arrow-1">></label> <label for="button-2" class="arrows" id="arrow-2">></label> <label for="button-3" class="arrows" id="arrow-3">></label> <label for="button-4" class="arrows" id="arrow-4">></label> <label for="button-5" class="arrows" id="arrow-5">></label> <div id="slideshow-inner"> <ul> <li id="slide1"> <img src="http://cssdeck.com/uploads/media/items/3/3yiC6Yq.jpg" /> <div class="description"> <input type="checkbox" id="show-description-1"/> <label for="show-description-1" class="show-description-label">I</label> <div class="description-text"> <h2>Flower power</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p> </div> </div> </li> <li id="slide2"> <img src="http://cssdeck.com/uploads/media/items/4/40Ly3VB.jpg" /> <div class="description"> <input type="checkbox" id="show-description-2"/> <label for="show-description-2" class="show-description-label">I</label> <div class="description-text"> <h2>Golden sunset</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p> </div> </div> </li> <li id="slide3"> <img src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" /> <div class="description"> <input type="checkbox" id="show-description-3"/> <label for="show-description-3" class="show-description-label">I</label> <div class="description-text"> <h2>Flower power again</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p> </div> </div> </li> <li id="slide4"> <img src="http://cssdeck.com/uploads/media/items/2/2rT2vdx.jpg" /> <div class="description"> <input type="checkbox" id="show-description-4"/> <label for="show-description-4" class="show-description-label">I</label> <div class="description-text"> <h2>Stormy coast</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p> </div> </div> </li> <li id="slide5"> <img src="http://cssdeck.com/uploads/media/items/8/8k3N3EL.jpg" /> <div class="description"> <input type="checkbox" id="show-description-5"/> <label for="show-description-5" class="show-description-label">I</label> <div class="description-text"> <h2>Splash!</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p> </div> </div> </li> </ul> </div> </div>
CSS
@font-face { font-family: 'WebSymbolsRegular'; src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot'); src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.woff') format('woff'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.ttf') format('truetype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont#WebSymbolsRegular') format('svg'); } @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700); * { margin: 0; padding: 0; } body { background-image: url(http://subtlepatterns.com/patterns/dark_wall.png); background-repeat: repeat; height: 500px; padding: 1px; } h1 { color: white } #slideshow-wrap { display: block; height: 320px; min-width: 260px; max-width: 640px; margin: auto; border: 12px rgba(255,255,240,1) solid; -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8); box-shadow: 0px 0px 5px rgba(0,0,0,.8); margin-top: 100px; position: relative; } #slideshow-inner { width: 100%; height: 100%; background-color: rgb(0,0,0); overflow: hidden; position: relative; } #slideshow-inner>ul { list-style: none; height: 100%; width: 500%; overflow: hidden; position: relative; left: 0px; -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); transition: left .8s cubic-bezier(0.77, 0, 0.175, 1); } #slideshow-inner>ul>li { width: 20%; height: 320px; float: left; position: relative; } #slideshow-inner>ul>li>img { margin: auto; height: 100%; } #slideshow-wrap input[type=radio] { position: absolute; left: 50%; bottom: 15px; z-index: 100; visibility: hidden; } #slideshow-wrap label:not(.arrows):not(.show-description-label) { position: absolute; left: 50%; bottom: -45px; z-index: 100; width: 12px; height: 12px; background-color: rgba(200,200,200,1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8); box-shadow: 0px 0px 3px rgba(0,0,0,.8); -webkit-transition: background-color .2s; -moz-transition: background-color .2s; -o-transition: background-color .2s; transition: background-color .2s; } #slideshow-wrap label:not(.arrows):active { bottom: -46px } #slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) } #slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) } #slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) } #slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) } #slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) } #slideshow-wrap label[for=button-1] { margin-left: -36px } #slideshow-wrap label[for=button-2] { margin-left: -18px } #slideshow-wrap label[for=button-4] { margin-left: 18px } #slideshow-wrap label[for=button-5] { margin-left: 36px } #slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 } #slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% } #slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% } #slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% } #slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% } label.arrows { font-family: 'WebSymbolsRegular'; font-size: 25px; color: rgb(255,255,240); position: absolute; top: 50%; margin-top: -25px; display: none; opacity: 0.7; cursor: pointer; z-index: 1000; background-color: transparent; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; text-shadow: 0px 0px 3px rgba(0,0,0,.8); } label.arrows:hover { opacity: 1 } label.arrows:active { margin-top: -23px } input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 { right: -55px; display: block; } input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -55px; display: block; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px } input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px } input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px } .description { position: absolute; top: 0; left: 0; width: 260px; font-family: 'Yanone Kaffeesatz'; z-index: 1000; } .description input { visibility: hidden } .description label { font-family: 'WebSymbolsRegular'; background-color: rgba(255,255,240,1); position: relative; left: -17px; top: 00px; width: 40px; height: 27px; display: inline-block; text-align: center; padding-top: 7px; border-bottom-right-radius: 15px; cursor: pointer; opacity: 0; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; z-index: 5; color: rgb(20,20,20); } #slideshow-inner>ul>li:hover .description label { opacity: 1 } .description input[type=checkbox]:checked~label { opacity: 1 } .description .description-text { background-color: rgba(255,255,230,.5); padding-left: 45px; padding-top: 25px; padding-right: 15px; padding-bottom: 15px; position: relative; top: -35px; z-index: 4; opacity: 0; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; color: rgb(20,20,20); } .description input[type=checkbox]:checked~.description-text { opacity: 1 }
JAVASCRIPT
Expand for more options Login