Accordion slider Azik-Samarka Follow 2012-10-27 21:18:14 License: MIT License Fork0 Fav1 View1662 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 0 lines HTML 36 lines CSS 110 lines using only CSS. created by Azik Samarkandiy. Follow me on twitter @samarkandiy Accordion slider <div class="slider"> <div class="slides"> <p class="title"><q>Come forth into the light of things, let nature be your teacher.</q> <span class="author">William Wordsworth </span> </p> </div> <div class="slides"> <p class="title"><q>Look deep into nature, and then you will understand everything better.</q> <span class="author">Albert Einstein </span> </p> </div> <div class="slides"> <p class="title"><q>A bird doesn't sing because it has an answer, it sings because it has a song.</q> <span class="author">Lou Holtz </span> </p> </div> <div class="slides"> <p class="title"><q>The butterfly counts not months but moments, and has time enough. </q> <span class="author">Rabindranath Tagore </span> </p> </div> <div class="slides"> <p class="title"><q>There are always flowers for those who want to see them.</q> <span class="author">Henri Matisse </span> </p> </div> <div class="slides"> <p class="title"><q>Green is the prime color of the world, and that from which its loveliness arises.</q> <span class="author">Pedro Calderon</span> </p> </div> </div> <a class="github" href="https://github.com/html5web" target="_blank"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <h3>follow me <a href="https://twitter.com/samarkandiy" target="_blank">@samarkandiy</a> </h3> Accordion slider body{ background: #ccc; width: 900px; margin: 0 auto; padding: 40px; } .slider{ background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg); position: relative; width: 900px; height: 300px; cursor: pointer; overflow: hidden; border: solid 7px #111; } .slides{ width: 800px; height: 300px; float: left; position: absolute; transition: margin .3s linear; } .slides:nth-child(1){ background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-10.jpg); } .slides:nth-child(2){ background: #333 url(http://lorempixel.com/output/nature-q-c-900-300-5.jpg); margin-left: 150px; } .slides:nth-child(3){ background: #444 url(http://lorempixel.com/output/nature-q-c-900-300-7.jpg); margin-left: 300px; } .slides:nth-child(4){ background: #555 url(http://lorempixel.com/output/nature-q-c-900-300-6.jpg); margin-left: 450px; } .slides:nth-child(5){ background: #666 url(http://lorempixel.com/output/nature-q-c-900-300-2.jpg); margin-left: 600px; } .slides:nth-child(6){ background: #777 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg); margin-left: 750px; } .slides:hover{ margin: 0 50px 0 50px; position: absolute; z-index: 9999; transition: .1s linear; } .slides:hover .title{ transform: translateY(-140px); transition: .5s linear; } .title{ background: rgba(255, 255, 255, .7); margin: 30px; padding: 20px; border-radius: 5px; position: absolute; bottom: -150px; } q{ font-size: 16px; font-style: italic; } .author{ margin: 0 0 0 20px; } ::selection{ background: #222; color: #fff; } .github img{ position: absolute; top: 0; right: 0; border: 0; } h3{ font-family: "Courier"; color: #111; text-align: right; position: absolute; bottom: -10px; right: 10px; } h3 a{ color: #111; text-decoration: none; } using only CSS. created by Azik Samarkandiy. Follow me on twitter @samarkandiy <div class="slider"> <div class="slides"> <p class="title"><q>Come forth into the light of things, let nature be your teacher.</q> <span class="author">William Wordsworth </span> </p> </div> <div class="slides"> <p class="title"><q>Look deep into nature, and then you will understand everything better.</q> <span class="author">Albert Einstein </span> </p> </div> <div class="slides"> <p class="title"><q>A bird doesn't sing because it has an answer, it sings because it has a song.</q> <span class="author">Lou Holtz </span> </p> </div> <div class="slides"> <p class="title"><q>The butterfly counts not months but moments, and has time enough. </q> <span class="author">Rabindranath Tagore </span> </p> </div> <div class="slides"> <p class="title"><q>There are always flowers for those who want to see them.</q> <span class="author">Henri Matisse </span> </p> </div> <div class="slides"> <p class="title"><q>Green is the prime color of the world, and that from which its loveliness arises.</q> <span class="author">Pedro Calderon</span> </p> </div> </div> <a class="github" href="https://github.com/html5web" target="_blank"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <h3>follow me <a href="https://twitter.com/samarkandiy" target="_blank">@samarkandiy</a> </h3> body{ background: #ccc; width: 900px; margin: 0 auto; padding: 40px; } .slider{ background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg); position: relative; width: 900px; height: 300px; cursor: pointer; overflow: hidden; border: solid 7px #111; } .slides{ width: 800px; height: 300px; float: left; position: absolute; transition: margin .3s linear; } .slides:nth-child(1){ background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-10.jpg); } .slides:nth-child(2){ background: #333 url(http://lorempixel.com/output/nature-q-c-900-300-5.jpg); margin-left: 150px; } .slides:nth-child(3){ background: #444 url(http://lorempixel.com/output/nature-q-c-900-300-7.jpg); margin-left: 300px; } .slides:nth-child(4){ background: #555 url(http://lorempixel.com/output/nature-q-c-900-300-6.jpg); margin-left: 450px; } .slides:nth-child(5){ background: #666 url(http://lorempixel.com/output/nature-q-c-900-300-2.jpg); margin-left: 600px; } .slides:nth-child(6){ background: #777 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg); margin-left: 750px; } .slides:hover{ margin: 0 50px 0 50px; position: absolute; z-index: 9999; transition: .1s linear; } .slides:hover .title{ transform: translateY(-140px); transition: .5s linear; } .title{ background: rgba(255, 255, 255, .7); margin: 30px; padding: 20px; border-radius: 5px; position: absolute; bottom: -150px; } q{ font-size: 16px; font-style: italic; } .author{ margin: 0 0 0 20px; } ::selection{ background: #222; color: #fff; } .github img{ position: absolute; top: 0; right: 0; border: 0; } h3{ font-family: "Courier"; color: #111; text-align: right; position: absolute; bottom: -10px; right: 10px; } h3 a{ color: #111; text-decoration: none; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? using only CSS. created by Azik Samarkandiy. Follow me on twitter @samarkandiy Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Azik-Samarkandiy URLhttp://iweb.uz/azik Web designer, polyglot. Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/1X6p/js"></script> accordion application art&design css CSS html5_elements&api slider slider, transition, user_interface Discussion Questions on this code? Tags accordion application art&design css html5_elements&api slider slider, transition, user_interface Favorite by GeckoTang