Image Gallery With CSS3

Image Gallery ini hanya pengembangan dari postingan saya sebelumnya yaitu 'Effect Sliding Image Gallery With CSS3'. info lebih lanjut sobat bisa lihat disana..

Baiklah saya tidak banyak menjelaskan mengenai tutorial 'image gallery' ini, untuk contoh sobat lihat dibawah ini..

• Image-1
• Image-2
• Image-3
• Image-4
• Image-5

Berikut Kode Image Galery With CSS3 :

#UTimg_gallery {
border:3px solid #333;
position:relative;
padding:0;
margin:20px auto;
width:412px;
height:285px;
background:#ccc url(http://picturestack.com/276/401/RzQ2010122112wst.jpg) 6px 83% no-repeat;
background-size:400px 230px;
border-radius:3px;
border-bottom-left-radius:9px;
border-bottom-right-radius:9px;
box-shadow:0 0 6px #000;
}
#UTimg_gallery li{
margin:0; /* original code http://ut2a-4down.blogspot.com */
float:left;
margin-left:1px;
text-align:center;
list-style: none;
padding:0;
}
#UTimg_gallery li a{
display:inline-block;
padding:9px 0;
width:78px; /* original code http://ut2a-4down.blogspot.com */
background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkCngSVvtw9TxHZjCvQxHFe1QqVwFuW7NTq4tw3wsvGzwn41To7sD74T6Dr2RSIEA0QPLHz-_2ER1Gf2aNFnqXnJGJbRRjTJFeV_4rhVfBdhI2eECnXN7h3SxGsCPfoJxiU1ON8ADxP24j/s800/nav_bg.png) 0 100%  repeat-x;
border:1px solid #666;
color:#33CCFF;
margin:2px 0 2px 1px;
font-size:11px;
font-family:Arial;
font-weight:700;
text-decoration:none;
}
#UTimg_gallery li a,#GUTimg_gallery li a img{
transition:1.8s ease;-o-transition:1.8s ease;-moz-transition:1.8s ease;-webkit-transition:1.8s ease;-ms-transition:1.8s ease;
}
#UTimg_gallery li a:hover {
background:#fff  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkCngSVvtw9TxHZjCvQxHFe1QqVwFuW7NTq4tw3wsvGzwn41To7sD74T6Dr2RSIEA0QPLHz-_2ER1Gf2aNFnqXnJGJbRRjTJFeV_4rhVfBdhI2eECnXN7h3SxGsCPfoJxiU1ON8ADxP24j/s800/nav_bg.png) 0 -40px  repeat-x;text-shadow:2px 2px 2px #888;
color:red;  /* original code http://ut2a-4down.blogspot.com */
border-bottom:5px solid red;
opacity:1.0;
filter:alpha(opacity=100);
padding:9px 0 4px;
}
li#UTimg_img a, li#UTimg_img a:hover {
background:#aaa;
color: #FF9900;
}
#UTimg_gallery li a img{
position:absolute;
left:3px;
top:38px;
width:400px;
height:230px;
clear:left;
padding:2px;
border:1px solid #444;
border-bottom:5px solid #444;
border-top:5px solid #222;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
opacity:0.0;
}
li#UTimg_img1 a img, #UTimg_gallery li a:hover img {
display:block;
opacity:0.35;
filter:alpha(opacity=35);
}
li#UTimg_img1 a:hover img, li#UTimg_img2 a:hover img, li#UTimg_img3 a:hover img, li#UTimg_img4 a:hover img, li#UTimg_img5 a:hover img {
border-color:#888;
opacity:1.0;
filter:alpha(opacity=100);
}

<ul id="UTimg_gallery">
<li id="UTimg_img1"><a href="URL-IMG-1.jpg">Image-1<img src="URL-IMG-1.jpg" /></a></li>
<li id="UTimg_img2"><a href="URL-IMG-2.jpg">Image-2<img src="URL-IMG-2.jpg"/></a></li>
<li id="UTimg_img3"><a href="URL-IMG-3.jpg">Image-3<img src="URL-IMG-3.jpg"/></a></li>
<li id="UTimg_img4"><a href="URL-IMG-4.jpg">Image-4<img src="URL-IMG-4.jpg"/></a></li>
<li id="UTimg_img5"><a href="URL-IMG-5.jpg"/>Image-5<img src="URL-IMG-5.jpg"/></a></li>
</li>
</ul>

Cara Menyimpan Kode diatas :
1. Login ke akun Blogger
2. Klik Tata Letak / Layout
3. Klik tab Edit HTML
4. Cari kode ]]></b:skin> ,Lalu copy dan paste kode CSS tepat diatas kode ]]></b:skin>
5. Klik "Simpan Template (Save Template)".
6. Gunakan xHTML dalam posting atau bagian lain blog.
7. Selesai deh.hehee...

Please rate this article: