Photo Gallery - Muhammad Fauzi Sewaktu Kecil
Bagaimana cara membuatnya?
Kode CSS3 dan HTML untuk membuat gallery di blogspot:
<style media="screen" type="text/css"> #container{width:100%;min-height:100%;background-color:#000;} .heading{font-size:24px;color:#fbf6fd;text-shadow:2px 2px 4px #dedede;text-align:center;padding:20px;} .clearfix{clear:both;float:none;} .img{-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);float:left;margin-left:-50px;margin-right:-50px;margin-top:-10px;-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;} .img img{padding:10px;} .img:hover{-webkit-transform:scale(0.8);-webkit-box-shadow:0px 0px 10px #dedede;-moz-transform:scale(0.8);-moz-box-shadow:0px 0px 10px #dedede; -o-transform:scale(0.8);-o-box-shadow:0px 0px 10px #dedede;box-shadow:0px 0px 10px #dedede;} .img .mask{width:100%;height:100%;background-color:rgba(0,0,0,.6);position:absolute;cursor:pointer;-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;} #img-1:hover .mask{height:0%;} #img-2:hover .mask{height:0%;margin-top:130px;} #img-4:hover .mask{margin-left:219px;margin-top:135px;height:0%;width:0%;} #img-3 #mask-1{width:50%;} #img-3 #mask-2{width:50%;margin-left:211px;} #img-3:hover #mask-1{width:0%;} #img-3:hover #mask-2{margin-left:430px;width:0%;} #img-5:hover .mask{margin-left:219px;margin-top:135px;height:0%;width:0%;-webkit-transform:rotateX(360deg);-moz-transform:rotate(360deg);-o-transform: rotate(-360deg);} #img-6:hover .mask{margin-left:219px;margin-top:135px;height:0%;width:0%;-webkit-transform:rotateZ(750deg);-moz-transform:rotateZ(750deg);-o-transform: rotat(750deg);} </style> <div id="container"> <div class="heading"> Photo Gallery - Muhammad Fauzi Sewaktu Kecil</div> <div id="image-container"> <div class="img" id="img-1"> <div class="mask"> </div> <img src="https://lh3.googleusercontent.com/-f2dnTOiybOI/UAhkB6r_ZXI/AAAAAAAAAeo/AJOYheH22xY/w400-h250-n-k/2012-07-05%2B01-10-05_0040.jpg"> </div> <div class="img" id="img-2"> <div class="mask"> </div> <img src="https://lh6.googleusercontent.com/-tLHbaB_PT1M/UAhn8YbnaUI/AAAAAAAAAi8/ot-qauhvIec/w400-h250-n-k/Alang+Fauzi+Bertuah.jpg"> </div> <div class="img" id="img-3"> <div class="mask" id="mask-1"> </div> <div class="mask" id="mask-2"> </div> <img src="https://lh6.googleusercontent.com/-xzPQ6pFGBZk/UAhj2OuhB0I/AAAAAAAAAeY/QNb8IW63g8M/w400-h250-n-k/2012-07-05%2B00-56-32_0038.jpg"> </div> <div class="img" id="img-4"> <div class="mask"> </div> <img src="https://lh4.googleusercontent.com/-5sEuaskmoxc/UAhkeFF7gdI/AAAAAAAAAfI/DciBGw3qM3A/w400-h250-n-k/2012-07-05%2B01-15-41_0044.jpg"> </div> <div class="img" id="img-5"> <div class="mask"> </div> <img src="https://lh3.googleusercontent.com/-LqhkHaXzD08/UAhmtSbp8nI/AAAAAAAAAhg/95QynyH8q5E/w400-h250-n-k/2012-07-05%2B01-55-04_0064.jpg"> </div> <div class="img" id="img-6"> <div class="mask"> </div> <img src="https://lh4.googleusercontent.com/-Y1nyBHtOLao/UAhkW46cz4I/AAAAAAAAAfA/eP8DsFVPeJY/w400-h250-n-k/2012-07-05%2B01-15-00_0043.jpg"> </div> <div class="clearfix"> </div> </div> </div>
gampang kan :)
lebih detail, silahkan kunjungi: http://www.nikesh.me/blog/2010/05/sexy-image-hover-effects-using-css3/
gambar ini berasal dari: http://seanarmy.deviantart.com |