Sliding Hover Transition dengan CSS3

Sliding Hover Transition merupakan sebuah slide Gambar yang terbangun dari penggabungan kinerja CSS3. Untuk Sliding Hover Transitio sesederhana ini menjadi sangat menarik dan tidak akan membebani loading blog. CODE ini bisa kamu terapkan dalam sebuah posting blog mau pun di widget blog, and bisa memanfaatkan CODE ini dalam sebuah posting tentuknya yang terdapat sebuah gambag dan kamu bisa memberi diskripsi gambar dengan menggunakan tag yang akan kia pelajari. dalam penerapan CODE ini cukup mudah hanya memperhatikan tutorial yang akan kami berikan, mungkin langsung saja kita buat sebuah codenya :
1. Silahkan anda login terlebih dahulu ke Blogger.com
2. Silahkan masuk ke Edit Tempat Blog
3. Setelah Itu cari kode ]]></b:skin> dan kopi paste kode dibwah ini diatasnya .

CSS

/* Hover Transition */
 
.gambar {width:400px;
overflow: hidden;
display: inline-block;
position: relative;
height: 200px;
}
.gambar img{width:400px; height:100%;
vertical-align: bottom;
}
 
.gambar:hover .overlay {
right: 200px;
}
.gambar:hover .description {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* IE 5.5-7 */
filter: alpha(opacity=100);
/* Netscape */
-moz-opacity: 1;
/* Safari 1.x */
-khtml-opacity: 1;
/* Modern browsers */
opacity: 1;
 
transition: 1s ease-in;
-webkit-transition: 1s ease-in;
}
 
.gambar .overlay {
display: block;
position: absolute;
height: 200px;
width: 100%;
top: 0;
right: -100%;
 
transition: .4s ease-out;
-webkit-transition: .4s ease-out;
}
.gambar .overlay .rectangle,
.gambar .overlay .arrow-left {
position: absolute;
top: 0;
}
.gambar .overlay .rectangle {
display: block;
margin-left: 200px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,.95);
}
.gambar .overlay .arrow-left {
position: relative;
left: 0;
width: 0;
height: 0;
top: 0;
bottom: 0;
 
border-bottom: 200px solid transparent;
border-right: 200px solid rgba(255,255,255,.95);
}
 
.gambar .description {
text-align: left;
position: absolute;
padding: 30px 50px;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #cc6812;
 
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5.5-7 */
filter: alpha(opacity=0);
/* Netscape */
-moz-opacity: 0;
/* Safari 1.x */
-khtml-opacity: 0;
/* Modern browsers */
opacity: 0;
 
transition: .2s ease-out;
-webkit-transition: .2s ease-out;
}
.gambar .description h3 {
text-align: center;
font-size: 20px;
margin-bottom: 25px;
font-weight: bold;
}
 
.gambar .link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
margin: 0;
}

 

4. Sekarang hampir aja selesai sekarang kita tinggan memanggil tag cssnya dengan HTML dan html ini bisa anda taruh pada sebuah postingan kalian

HTML

<div class="gambar">
<a class="link" href="#"></a>
<div class="overlay">
<div class="arrow-left"></div>
<div class="rectangle"></div>
</div>
<div class="description">
<h3>Project</h3>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
</div>
<img src="tumb.jpg"> </div>

Selesai