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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibh4No9fCX4t5VYmCFi2cr87kMbNaeteIPXor4athlg4kBxkYsFmgkpfkeDJjq0cWRmCmBtcN2ztG9CASxNT_jO_RaaX1KgZdNj6ZiAXiaeAFHzQw5GR-PWoF2U5dTN2-5coQRJIpbIzOl/w400-h250-n-k/2012-07-05+01-10-05_0040.jpg">
</div>
<div class="img" id="img-2">
<div class="mask">
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB9-xVlwQGGncy_G0WwqbKknCwQozS967MWq5VweuzX_4XtgaJSbHVIw2cRwG0Y8sHVLMEofr-X33P07NKUi5UWCchxjRQr46zWQ5Ld_GCFokx4lxV1YFTVvyQZX5RUvWt5T02jdlkE1iY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKAc7_YIKR5_9wGQ95mRw3JvxYl7gK5IeGW0_5XSAUFTccl1bk6514rCMqWWqqk3CCnrOuaxu2kwO7-Ai53xPyXgYiqIf5UnRyu5sGfrKyZVn2TOq03rKuoWM6Vs5uAj50W6exYTM8xj7-/w400-h250-n-k/2012-07-05+00-56-32_0038.jpg">
</div>
<div class="img" id="img-4">
<div class="mask">
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kTau1gKU06FMBdHgSyUKqYKW751JSzxDdBAdgMuhR3r9Ec3N5Hy97q0BdQdSYgoUpF4Ty8KdIHRtIXmSaHHw07MbU92NZwIJ0faRU-ADDxFBn5r2d-zRZ4nxvostwtahtev7FVIuKKSk/w400-h250-n-k/2012-07-05+01-15-41_0044.jpg">
</div>
<div class="img" id="img-5">
<div class="mask">
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2BIhIw9qEaS007saEytUMB_kffFfZc6coMGdOjznxm64um12mypbECSxunJBrGOw6ANrPHAZmjnw6yzBZYbRXMri2OqNkrgGh4Nni3WHhGEx0QzFmU0n0nIwkKQfjjyG0HqnEELhGAV1C/w400-h250-n-k/2012-07-05+01-55-04_0064.jpg">
</div>
<div class="img" id="img-6">
<div class="mask">
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJhU8dybb8PSrtkxdv4E00e3XFr6gwQCSANMZI7kZp9bIEDbDZQ-a30eRVZMDPsz1S0KoqqGTpRLo3rAjsmWM9RNpFYYu2Vyjr9n4ared_aY2Hb-MAqgvFiycFmI-cG22NnWLtDhiqT7fm/w400-h250-n-k/2012-07-05+01-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 |
0 Komentar untuk "CSS Gallery Untuk Blogger"