Membuat Autor Image Hover Dengan CSS3

Baiklah sobat masih bermain-main dengan CSS3 Mari kita mulai dengan tata letak HTML dasar. ane akan menggunakan sebuah gambar, dan teks overlay. Di hover masker akan muncul dengan CSS3 efek transisi.
Waduh ni bahasa gaknyambung banget gan ya,,,,,,, wkwkkwkkwk

Oke gan daripada banyak cingcong mendingan kita mulai tutornya

FOR DEMO CLICK HERE

Trik ini menggunakan dua langkah Penambahan CSS ke HTML Layout Dan ke Widget

Langkah Pertama :
Masuk Ke Akun Blogger Sobat
Klik Template ===> Add Widget ===> Klik HTML
Dan Kopas kode dibawah ini :

<div class="view view-sixth" style="margin-bottom:30px">

     <img src="IMAGE URL SOBAT">

     <div class="mask">

     <h2>Hi, my name is Ntechi</h2>

     <p>I am a php coder and sharing a simple CSS3 effect </p>

         <a href="http://joens-tutorial.blogspot.com" class="info" target="_blank">Read More</a>

     </div>

</div>

Langkah kedua :
Klik Template ==> Centang Expan template widget
Cari kode ]]></b:skin>
Dan Kopi Coding Dibahah ini tepat diatas kode ]]></b:skin>

.view-sixth img {

   -webkit-transition: all 0.4s ease-in-out 0.5s;

   -moz-transition: all 0.4s ease-in-out 0.5s;

   -o-transition: all 0.4s ease-in-out 0.5s;

   -ms-transition: all 0.4s ease-in-out 0.5s;

   transition: all 0.4s ease-in-out 0.5s;

}

.view-sixth .mask {

   background: rgba(146,96,91,0.5);

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   opacity: 0;

   -webkit-transition: all 0.3s ease-in 0.4s;

   -moz-transition: all 0.3s ease-in 0.4s;

   -o-transition: all 0.3s ease-in 0.4s;

   -ms-transition: all 0.3s ease-in 0.4s;

   transition: all 0.3s ease-in 0.4s;

}

.view-sixth h2 {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   opacity: 0;

   border-bottom: 1px solid rgba(0, 0, 0, 0.3);

   background: transparent;

   margin: 20px 40px 0px 40px;

   -webkit-transform: scale(10);

   -moz-transform: scale(10);

   -o-transform: scale(10);

   -ms-transform: scale(10);

   transform: scale(10);

   -webkit-transition: all 0.3s ease-in-out 0.1s;

   -moz-transition: all 0.3s ease-in-out 0.1s;

   -o-transition: all 0.3s ease-in-out 0.1s;

   -ms-transition: all 0.3s ease-in-out 0.1s;

   transition: all 0.3s ease-in-out 0.1s;

}

.view-sixth p {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   opacity: 0;

   -webkit-transform: scale(10);

   -moz-transform: scale(10);

   -o-transform: scale(10);

   -ms-transform: scale(10);

   transform: scale(10);

   -webkit-transition: all 0.3s ease-in-out 0.2s;

   -moz-transition: all 0.3s ease-in-out 0.2s;

   -o-transition: all 0.3s ease-in-out 0.2s;

   -ms-transition: all 0.3s ease-in-out 0.2s;

   transition: all 0.3s ease-in-out 0.2s;

}

.view-sixth a.info {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   opacity: 0;

   -webkit-transform: translateY(100px);

   -moz-transform: translateY(100px);

   -o-transform: translateY(100px);

   -ms-transform: translateY(100px);

   transform: translateY(100px);

   -webkit-transition: all 0.3s ease-in-out 0.1s;

   -moz-transition: all 0.3s ease-in-out 0.1s;

   -o-transition: all 0.3s ease-in-out 0.1s;

   -ms-transition: all 0.3s ease-in-out 0.1s;

   transition: all 0.3s ease-in-out 0.1s;

}

.view-sixth:hover .mask {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

   filter: alpha(opacity=100);

   opacity: 1;

   -webkit-transition-delay: 0s;

   -moz-transition-delay: 0s;

   -o-transition-delay: 0s;

   -ms-transition-delay: 0s;

   transition-delay: 0s;

}

.view-sixth:hover img {

   -webkit-transition-delay: 0s;

   -moz-transition-delay: 0s;

   -o-transition-delay: 0s;

   -ms-transition-delay: 0s;

   transition-delay: 0s;

}

.view-sixth:hover h2 {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

   filter: alpha(opacity=100);

   opacity: 1;

   -webkit-transform: scale(1);

   -moz-transform: scale(1);

   -o-transform: scale(1);

   -ms-transform: scale(1);

   transform: scale(1);

   -webkit-transition-delay: 0.1s;

   -moz-transition-delay: 0.1s;

   -o-transition-delay: 0.1s;

   -ms-transition-delay: 0.1s;

   transition-delay: 0.1s;

}

.view-sixth:hover p {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

   filter: alpha(opacity=100);

   opacity: 1;

   -webkit-transform: scale(1);

   -moz-transform: scale(1);

   -o-transform: scale(1);

   -ms-transform: scale(1);

   transform: scale(1);

   -webkit-transition-delay: 0.2s;

   -moz-transition-delay: 0.2s;

   -o-transition-delay: 0.2s;

   -ms-transition-delay: 0.2s;

   transition-delay: 0.2s;

}

.view-sixth:hover a.info {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

   filter: alpha(opacity=100);

   opacity: 1;

   -webkit-transform: translateY(0px);

   -moz-transform: translateY(0px);

   -o-transform: translateY(0px);

   -ms-transform: translateY(0px);

   transform: translateY(0px);

   -webkit-transition-delay: 0.3s;

   -moz-transition-delay: 0.3s;

   -o-transition-delay: 0.3s;

   -ms-transition-delay: 0.3s;

   transition-delay: 0.3s;

}

.view {

   width: 200px;

   height: 283px;

   margin: 10px;

   border: 10px solid #fff;

   overflow: hidden;

   position: relative;

   text-align: center;

   -webkit-box-shadow: 1px 1px 2px #e6e6e6;

   -moz-box-shadow: 1px 1px 2px #e6e6e6;

   box-shadow: 1px 1px 2px #e6e6e6;

   cursor: default;

   background: #fff url(../images/bgimg.jpg) no-repeat center center;

}

.view .mask,.view .content {

   width: 200px;

   height: 260px;

   position: absolute;

   overflow: hidden;

   top: 0;

   left: 0;

}

.view img {

   display: block;

   position: relative;

}

.view h2 {

   text-transform: uppercase;

   color: #fff;

   text-align: center;

   position: relative;

   font-size: 17px;

   padding: 10px;

   background: rgba(0, 0, 0, 0.8);

   margin: 20px 0 0 0;

}

.view p {

   font-family: Georgia, serif;

   font-style: italic;

   font-size: 13px;

   position: relative;

   color: #fff;

   padding: 10px 20px 20px;

   text-align: center;

}

.view a.info {

   display: inline-block;

   text-decoration: none;

   padding: 7px 14px;

   background: #000;

   color: #fff;

   text-transform: uppercase;

   -webkit-box-shadow: 0 0 1px #000;

   -moz-box-shadow: 0 0 1px #000;

   box-shadow: 0 0 1px #000;

   border-radius:10px;

}

.view a.info:hover {

   -webkit-box-shadow: 0 0 5px #000;

   -moz-box-shadow: 0 0 5px #000;

   box-shadow: 0 0 5px #000;

}