Ini adalah kode bikin slider box
<div class="widget-content"> <div class="slidingbox"> <div class="lover slide_in"> <div class="left_gate"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxbnWgQupf1jQjCZDzesxmuyeScpbLV-y-G0sSR-Z-QqT4-j9FtEOCa6cSDSGOmw4Fw6k4SQGCze6zfk96i8m-YXnjVOh5nT6aIz3rD1oU674Pogd0DFvBt8Txg7jgTxZt1prFOmR2WY/s1600/kiri.jpg" height="auto" width="150"/></div> <div class="right_gate"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwZgRE-QVHLwKxS29bB6ZkLihuCUf_xeJpFv5MybcAOWSRsWfsF6GR9QgsyeNvGOawq2JpaS6-fKHXJdq4seLym6r3iHYzIC4wKgzjOE8DlkOIeGldLBsZAUtZ-20kZtW_z1H96yOFIA/s1600/kanan.jpg" height="auto" width="150"/></div> <!-- isi box --> teks/image<!-- finis isi box --> </div> </div> <style> .slidingbox{ float:center; } .lover { position: relative; width: 300px; height: 211px; margin: 0px auto; background-color: #; z-index: 1; padding: 0px; } .left_gate{ position: absolute; background: #; bottom: 0; right: 50%; left: 0; top: 0; border:0px solid #F4F4F4; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out; } .lover:hover .left_gate{ right: 100%; left: -50%; } .right_gate{ position: absolute; background: #; bottom: 0; left: 50%; right: 0; top: 0; border:0px solid #; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .lover:hover .right_gate{ left: 100%; right: -50%; } .slide_in { overflow: hidden; } .slide_in .left_gate { background: url()#; border:0px solid #; } .slide_in .right_gate { background: url()#; border:0px solid #; } .lover img { margin-top: 0px; } </style> </div> <div class='clear'></div>
| Postingan ini dilengkapi fasilitas pengaturan jenis dan ukuran font. Pilih dan atur sesuai selera agar nyaman di mata. Terima Kasih. |
0 Comments
