Blog Mas Andes

Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)
10 Gallery CSS3 Image Efek Hover Pada Blog

10 Gallery CSS3 Image Efek Hover Pada Blog

Mas Andes 16/05/2013 20 comments Print
CSS3 Image Efek Hover Pada Blog
10 Gallery CSS3 Image Efek Hover Pada Blog – ini masih satu tema seperti tutorial sebelumnya, namun pada tutorial ini image hover kini hadir dalam 10 style. Semakin banyak style maka semakin banyak pula anda dapat memilih dan memahami isi dari masing-masing tutorial. Seperti yang sudah anda ketahui, bahwa untuk insert gambar kedalam blog sebenarnya dapat dilakukan dengan sangat mudah dan sederhana melalui tool yang tersedia pada toolbar posting. Gambar yang sangat banyak dan ukuran image yang belum tentu sama pada saat di upload kedalam satu posting tentu tidak akan membuat rapi dan teratur bukan, namun tidak demikian halnya jika anda sudah mengatur elemen image secara rapi dan tentu hal tersebut labih membuat posting blog lebih teratur dan tidak berantakan dengan adanya banyak gambar yang berjajar tidak sesuai ukuran. Jika mungkin berminat silahkan lihat pada halaman demo dengan tekan tombol button dibawah, jika menurut anda suka silahkan bisa diterapkan untuk custom blog anda. Berikut adalah tutorial cara membuat 10 Gallery CSS3 Image Efek Hover Pada Blog:
1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
CSS3 Image Efek Hover Pada Blog
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-first img {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.view-first h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first p {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-first:hover img {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
}
.view-first a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first: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);
}
.view-first:hover p {
-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-first:hover a.info {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Langkah selanjutnya klik Entri Baru, lalu copy kode dibawah ini kemudian paste di kolom posting mode HTML.
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZpiY4POrlFHwakTeBI0ygYRirpL0xfSY5MxJ-bvNQbHLSNZdC2DVDtdjQR4NT20DVD1IZ93GlwNUp6lR6_albzNNJ8iABwBAQF0iVU9oZiZzE9nYXpz__XZ-di3b6D6oshzCToVGJzzE_/w250-h200-no/Faceblog+Evolutions+%25289%2529.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5yA54648aL-3Ag6JPLYaokPPP48vvZ0akeJs67KDWkYthDcypetbRPV6Al4xZ8IA3FKz2cWkuBzxDx72ZJIaqP7bbyKilxZ39-57CrXLCKvzWHAVCo5xp3NLkypq0L_FFnUsqmj2qH2cG/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZ-GNbxDGRTzPkyYg5nzT0QVM_YMWr1f1sYtFPxNp4_4UkAE_NSeOi2pHY63V1s4XrR7sI-XsfKPXEwjwtlmLCV3TAQSE0OJqqZZGORDz7kF2gK4p0T7hp00t-1XuJVAMB1tP1H9ahyphenhyphense/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxdrmzlr3mOAPR5-ox0QPsEJ4yeImN1Bh9pFsiMNQPsLng_Q5CRn61zZh88TXZKqcuAoiTXeswUUCpImZqEb6m_chPz1Wl1JYdem5cQBB0wwvJnqp5x2umvE6PlRvy1F8qGphJIYHdPue/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan. Jika sudah sesuai silahkan klik Publikasikan.

Tutorial di atas adalah untuk efek HOVER STYLE 1, untuk membuat HOVER STYLE 2 - 10 seperti pada halaman demo maka silahkan copy kode dibawah ini dan cara pemasangannya seperti langkah diatas.

KODE HOVER STYLE 2
CSS
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-second img {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(115,146,184, 0.7);
width: 300px;
padding: 60px;
height: 300px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translate(265px, 145px) rotate(45deg);
-moz-transform: translate(265px, 145px) rotate(45deg);
-o-transform: translate(265px, 145px) rotate(45deg);
-ms-transform: translate(265px, 145px) rotate(45deg);
transform: translate(265px, 145px) rotate(45deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: translate(200px, -200px);
-moz-transform: translate(200px, -200px);
-o-transform: translate(200px, -200px);
-ms-transform: translate(200px, -200px);
transform: translate(200px, -200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-second p {
-webkit-transform: translate(-200px, 200px);
-moz-transform: translate(-200px, 200px);
-o-transform: translate(-200px, 200px);
-ms-transform: translate(-200px, 200px);
transform: translate(-200px, 200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-second a.info {
-webkit-transform: translate(0px, 100px);
-moz-transform: translate(0px, 100px);
-o-transform: translate(0px, 100px);
-ms-transform: translate(0px, 100px);
transform: translate(0px, 100px);
-webkit-transition: all 0.2s 0.1s ease-in-out;
-moz-transition: all 0.2s 0.1s ease-in-out;
-o-transition: all 0.2s 0.1s ease-in-out;
-ms-transition: all 0.2s 0.1s ease-in-out;
transition: all 0.2s 0.1s ease-in-out;
}
.view-second:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translate(-80px, -125px) rotate(45deg);
-moz-transform: translate(-80px, -125px) rotate(45deg);
-o-transform: translate(-80px, -125px) rotate(45deg);
-ms-transform: translate(-80px, -125px) rotate(45deg);
transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,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-second:hover p {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-second:hover a.info {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-o-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
HTML
<div class="view view-second">
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-5_zpsdfab2705.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-6_zps865e274c.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-7_zps44576497.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="http://i1327.photobucket.com/albums/u677/Andes_Rizky/Produk/Kamera-8_zps435d17d3.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="#" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 3
CSS
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-third img {
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.view-third .mask {
background-color: rgba(0,0,0,0.6);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translate(460px, -100px) rotate(180deg);
-moz-transform: translate(460px, -100px) rotate(180deg);
-o-transform: translate(460px, -100px) rotate(180deg);
-ms-transform: translate(460px, -100px) rotate(180deg);
transform: translate(460px, -100px) rotate(180deg);
-webkit-transition: all 0.2s 0.4s ease-in-out;
-moz-transition: all 0.2s 0.4s ease-in-out;
-o-transition: all 0.2s 0.4s ease-in-out;
-ms-transition: all 0.2s 0.4s ease-in-out;
transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third p {
-webkit-transform: translateX(300px) rotate(90deg);
-moz-transform: translateX(300px) rotate(90deg);
-o-transform: translateX(300px) rotate(90deg);
-ms-transform: translateX(300px) rotate(90deg);
transform: translateX(300px) rotate(90deg);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-third: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;
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.view-third:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.view-third:hover p {
-webkit-transform: translateX(0px) rotate(0deg);
-moz-transform: translateX(0px) rotate(0deg);
-o-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-third:hover a.info {
-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;
}
HTML
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Gn8ybMoqykli3kkrtyrueYUuOtebEm8nvoPlbSj_ZNDGKWtIK4GkDch82XKiQb8rxcvIgH41YOCTo5r9g5OASJukVULOvaM5FN7P47Pncl3T2JBSKYh7sJzC-uEj3ylw_lfs_kbHxb9/w250-h200-no/Faceblog+Evolutions+%25281%2529.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJYyVx7IuDLLG1BWVbqrFvS3Nw8EU4psYyOc1TUhXMnnx5l6wQjHdhMNUzjV7WZDJhv6_7LnvM1R2dDg66w5JIT41QRXcJ4OUgKEUc_nXrensBFDFV9MI_rDVOgHNWgHQoTAS-4KcsNEw6/w250-h200-no/Faceblog+Evolutions+%252811%2529.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjzOxXGFx6pQRjvQUZn4mDwwc4q3-FJNxxL0Dk5HLbIv0TaHgjWxec5F-awGDmy-wzr7IoqeYOb6XoXFdWql58feXuyEuuTotrCfagKE5JEi609h0Qf-kGK6-LGiR_zCUL1zFhpIVfC-5/w250-h200-no/Faceblog+Evolutions+%25280%2529.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhlCYOYmzCe37ypL3nRFZj2fbgROIcXYEhexV5hN1d002a0aFthn8fqWPZzOaIzDN94M-qqOdMs8Rhf1_L6kdo10QcpZv9PcyIQ95ffm_lX61gVJcObLlqWllosWT-yKnRMna7mu62FKMV/w250-h200-no/Faceblog+Evolutions+%252810%2529.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 4
CSS
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-fourth img {
   -webkit-transition: all 0.4s ease-in-out 0.2s;
   -moz-transition: all 0.4s ease-in-out 0.2s;
   -o-transition: all 0.4s ease-in-out 0.2s;
   -ms-transition: all 0.4s ease-in-out 0.2s;
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-fourth .mask {
   background-color: rgba(0,0,0,0.8);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0) rotate(-180deg);
   -moz-transform: scale(0) rotate(-180deg);
   -o-transform: scale(0) rotate(-180deg);
   -ms-transform: scale(0) rotate(-180deg);
   transform: scale(0) rotate(-180deg);
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}
.view-fourth 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-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-fourth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-fourth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
   -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-fourth:hover img {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
HTML
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuYcfY07gZ48tix1Dg3aUaskG5aACPUsnPXdQnT_fkuKSvbeqKCdq2LLpXblnyJiYwFpgDDJ8k-wCebvKCSEowgBnCcJQhTWtwuoTtLH1M2v90RVnXGjC4lKMv8CYT1wGW6bQSDfTmCAM/w250-h200-no/Faceblog+Evolutions+%252813%2529.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvH3cpcsV6zsPcR4G2VEUMNqGc70PJok95lRLnHP5Lg0CayjKXgHhdb8LxTshWaRoycA1CV6YwpQKnViqzDspxSNroQapMjq0wDgVM4ZQwjV4ntOWviYDutF5dxCMd-JfumFhm2STIJ1W7/w250-h200-no/Faceblog+Evolutions+%252814%2529.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5Gn8ybMoqykli3kkrtyrueYUuOtebEm8nvoPlbSj_ZNDGKWtIK4GkDch82XKiQb8rxcvIgH41YOCTo5r9g5OASJukVULOvaM5FN7P47Pncl3T2JBSKYh7sJzC-uEj3ylw_lfs_kbHxb9/w250-h200-no/Faceblog+Evolutions+%25281%2529.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4OmV6MvfiB-w4DABqQI0mXEPJEefiFxasAu8N2jmTlrA-nci895Jup9G7H6FLxsAPywNSbgfM5gPN0lxwxcqHoCHata3faMJ1nurDmNG4HKeRuHTQq0PPhofmK34hr_306ydIrCU3AW7e/w250-h200-no/Faceblog+Evolutions+%252812%2529.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 5
CSS
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-fifth img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-fifth .mask {
background-color: rgba(146,96,91,0.3);
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view-fifth h2 {
background: rgba(255, 255, 255, 0.5);
color: #000;
-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-fifth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
color: #333;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.view-fifth:hover .mask {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.view-fifth:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
.view-fifth:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
HTML
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlTZFznTzyMV3C01QNbbYBbBXenXPdGN13_6dQfkcwTj8EE6cSBJWjIKUpULOrioY9GGvvPM-amupG3M__n482XnGm9OslEMEtokX73ttj7hiiXdViFNuqQS1txDR7Phrr_mqsKucsI5ln/w250-h200-no/Faceblog+Evolutions+%252818%2529.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7HNoRabPstawt6MGIIGdP8UyHFVynRuH2lIlRdMg5uSwtCkPwnMgq_bA5pYpw18z-H6kRZ5d1PbzjIs1KS5lkLJL3RMYBQigU65sWjTrt_m4SARaqq7bUNf4l1O9eeWmWl8FkIe7SEZr/w250-h200-no/Faceblog+Evolutions+%252817%2529.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijp1nPwfRcQWgw3TGmrpfFH5n4yiVSim9iC8DRQWY_TtamkUBYh7Bl3IS0faXaASYqQkudgX9xuOBgmqjE-hygTtT7a37kU4triXZNlmZTZmTwbm3_sx5drfcC0Qs5hHNB_k0vuxRtdrOB/w250-h200-no/Faceblog+Evolutions+%252816%2529.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKTzKIFbwOijYZAelsGwhoChPMfiguIII2c0-Q1rwiEOOuqFa7rOp9LytYC0uC-IhhlL2G44YaKwmVW5fVm1524aAYCFcalCVH4lq-zsDUPcKQ-PhzEhcBfAFPGveVK0OLo4ZIoZa3NdHc/w250-h200-no/Faceblog+Evolutions+%252815%2529.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 6
CSS
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}

.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-color: 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;
}
HTML
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEn_BVonKmx2w47KxaC3TXt0d3Y9LlbQ9b6h-ZK5dalM13q-V4PZvVw4693UmSE4V_YtwWmdIjlTH5Veri41RuokkKPS6-SIULjXcfnVXWEjkuh1Ct9z8aCDMSP7He5so9rM7FBcFRsHSv/w250-h200-no/Faceblog+Evolutions+%252824%2529.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSP5NgdXvL6YpF2N-V-JVzrsZ2p4_9bPvmkJmz7PnMpaYvaIE5vEn96e284MIhZ1bioBL-Qqiy2QyOr1S-yPskFB66QuN5bHq_Q3MiXHB9J4XZBfZEeUsD7dpoDjslCVG59hEBUg7p1u8/w250-h200-no/Faceblog+Evolutions+%252821%2529.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizfRpQ31SL54LGB9uX1T6V1TAYpOgftHe69KHRoX6aMeGO5st3zYctTa_awR-hVfXLtJOIlFdv_EL160wGy4W2hlrIaireBESHwqwMddKpKVvlyEWYSccHj47Nf6s8vONW1-PbnJ-IELcF/w250-h200-no/Faceblog+Evolutions+%252820%2529.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXeutUH3_i7FH76iXh4B06gNRIU_lsJeStTfP49YiuyPIKuTCBAzKGsP49qy24mI7imXEpQd7sphBJyF-56pfFvhXla7RozWRB26oHR8wUekIINsTqUiPhWk2XAPn5jPdoeBX5olTGai3X/w250-h200-no/Faceblog+Evolutions+%252819%2529.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 7
CSS
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}

.view-seventh img {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-seventh .mask {
background-color: rgba(77,44,35,0.5);
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.view-seventh h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh p {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view-seventh:hover img {
-webkit-transform: rotate(720deg) scale(0);
-moz-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-seventh:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg);
-moz-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-seventh:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
-ms-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view-seventh:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view-seventh:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
HTML
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZrfWympDJmMa_Jf44LqMOPSYZfoQ5F4c-Hch-vf0Mr4J-cd7TgSh2kzOCgq76aw5MCXiQnofo1r6XDCoeftSfKxQeaHikE_ZrCklqe2YFtROCBLCvdUihZkTM00OYjrAGtQ6F45R7_-i/w250-h200-no/Faceblog+Evolutions+%252826%2529.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHa8nLTWawx29aAQ6ZsG9izlKBs9Q1NAqm-K4pyGGT3MGRRu_rL1Z1tp552zKhmLj1YBxO_LLSlD_Z7a6Kq7XZ-UYREYiFnMZQ8x5H7EEjM1iBO0o0wDSp-s6BkQKvvesDmGHFcZPl3IvM/w250-h200-no/Faceblog+Evolutions+%252825%2529.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoUeK9wW-YwGFydmWqHwP91VAad_kEhbBfs1MGEmkeN4j6O1hMzJOM1QqloUw0WqY-5C7Rtg_X0GaUXQhsOXt5U2KRDtZaYqbQAmguXdz079soIdrtZf2JAOObMQAovJcsWv8zGdFW_JT2/w250-h200-no/Faceblog+Evolutions+%252823%2529.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDxhEaBqmbFBxB3K1RQex8XAhiqQqwT5JVL1cg-hUsloK9N2RYxKU0TTwjQJPmpNjeUKvomgCPALGK59pI1S9h8nuK_KKCgr3GHHf0ePpALCyxpZp4g-Sc05kzC85DQYv8f_ghtrAcl253/w250-h200-no/Faceblog+Evolutions+%252822%2529.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 8
CSS
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-eighth .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.view-eighth h2 {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.view-eighth p {
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.view-eighth a.info {
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.view-eighth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}
.view-eighth:hover h2 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.view-eighth:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-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-eighth:hover a.info {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
0% { -moz-transform: translateY(-205px);}
40% { -moz-transform: translateY(-100px);}
65% { -moz-transform: translateY(-52px);}
82% { -moz-transform: translateY(-25px);}
92% { -moz-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
40% { -webkit-transform: translateY(-100px);}
65% { -webkit-transform: translateY(-52px);}
82% { -webkit-transform: translateY(-25px);}
92% { -webkit-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
HTML
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE-Cv15buRB5mN6Cbcd6B07l3LYDaRg7-VLxAYKN4M0Hdhyyn3jJYRzYtfzvuOkaeN5rFk-kVkx4KJdrdyMHbO1NN0DKWYZWxBtZkt_r9Dj-q6Emo8qxdVVc4dfRkW9EpRuFmbBbMTrmqR/w250-h200-no/Faceblog+Evolutions+%252830%2529.jpg" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-WMKsvqpS3MwzRT7xN_JGBj2IYHzUwLXym4bBCkzfW4GUZdYndYqLd3nXF3aMlHyvw0ZvrUxfsXzlIZg7WfFHw9DulDTXTgmDXThkZLvtZ4r15U0bDFkPqKySgNrYyiNe54tXZZVyR-j1/w250-h200-no/Faceblog+Evolutions+%252829%2529.jpg" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdx7J_xbhhllJiUmBVEZcmCQkogU671BiOqsUO7BfI5gVbmr-wUD_ukANVkS7NZH59-VXjvUrw7ha7KHDsgRX5HLfjtfUCbHP-5DjqsxhmQWHf9cJjBNkT16Uhv67CbXPVMryJCb3vwHaf/w250-h200-no/Faceblog+Evolutions+%252827%2529.jpg" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkAkvKjDP-gg33vNrymNszDzMza44l0Y9R5IEh9FeHODaMvP3Ca-384lvsNCh4-gZGBfUgJaGzNK6yNm4IkAm1UExiBD1WpK-4xWqW_u1Hf03p1zk4Wp445ekxyqtaPhTKFlRYKkKTqtu/w250-h200-no/Faceblog+Evolutions+%252828%2529.jpg" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 9
CSS
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-ninth .mask-1, .view-ninth .mask-2 {
background-color: rgba(0, 0, 0, 0.5);
height: 361px;
width: 361px;
background: rgba(119, 0, 36, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.3s ease-in-out 0.6s;
-moz-transition: all 0.3s ease-in-out 0.6s;
-o-transition: all 0.3s ease-in-out 0.6s;
transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
left: auto;
right: 0;
-webkit-transform: rotate(56.5deg) translateX(-180px);
-moz-transform: rotate(56.5deg) translateX(-180px);
-o-transform: rotate(56.5deg) translateX(-180px);
-ms-transform: rotate(56.5deg) translateX(-180px);
transform: rotate(56.5deg) translateX(-180px);
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-o-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
top: auto;
bottom: 0;
-webkit-transform: rotate(56.5deg) translateX(180px);
-moz-transform: rotate(56.5deg) translateX(180px);
-o-transform: rotate(56.5deg) translateX(180px);
-ms-transform: rotate(56.5deg) translateX(180px);
transform: rotate(56.5deg) translateX(180px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.view-ninth .content {
background: rgba(0, 0, 0, 0.9);
height: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
width: 361px;
overflow: hidden;
-webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
-moz-transform: rotate(-33.5deg) translate(-112px, 166px);
-o-transform: rotate(-33.5deg) translate(-112px, 166px);
-ms-transform: rotate(-33.5deg) translate(-112px, 166px);
transform: rotate(-33.5deg) translate(-112px, 166px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transition: all 0.4s ease-in-out 0.3s;
-moz-transition: all 0.4s ease-in-out 0.3s;
-o-transition: all 0.4s ease-in-out 0.3s;
transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2 {
background: transparent;
margin-top: 5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.view-ninth a.info {
display: none;
}
.view-ninth:hover .content {
height: 120px;
width: 250px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: 0.9;
top: 40px;
-webkit-transform: rotate(0deg) translate(0, 0);
-moz-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
-ms-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
-webkit-transform: rotate(56.5deg) translateX(1px);
-moz-transform: rotate(56.5deg) translateX(1px);
-o-transform: rotate(56.5deg) translateX(1px);
-ms-transform: rotate(56.5deg) translateX(1px);
transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
-webkit-transform: rotate(56.5deg) translateX(-1px);
-moz-transform: rotate(56.5deg) translateX(-1px);
-o-transform: rotate(56.5deg) translateX(-1px);
-ms-transform: rotate(56.5deg) translateX(-1px);
transform: rotate(56.5deg) translateX(-1px);
}
HTML
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZtJDVvFXuRStLGYr8gdW-cCbh5ObtlFG1LgYbyUlayaMeWiae_94Lt_4IcoVE_lsXkDA6My13zbHcEzAzMLMEL_Jbt6DJmoy2CTUMX89l8N6mPaGOZwlJQrFLLWnv5khe26U7nVdg1kc/w250-h200-no/Faceblog+Evolutions+%252834%2529.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg12kHqiUS30Db3w966uiefru_XIZLrbPrlUS8YJVEhP83_RTWoxwi8lsRGS-GDNfJnD5WBCAgDOQ4iZXzawEmyoMwF7Kc_GUhiEZHnuSnWJmU-RervatfzFv5GNE1IxJdiBqC_sYBz4kwr/w250-h200-no/Faceblog+Evolutions+%252832%2529.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkyTiMHe0FuxiSYrOqRpOphP1-JMpWhqvTBHbxbxXZThIg9CCcKSQSr9wxbWgpy-1uGP8CYVYcAkGchUIyUYnn0DJwqJapZw7cEKnnh2wGrYwmKAZP4mN8bUYRWRHNX-TLjunt8biohj2Q/w250-h200-no/Faceblog+Evolutions+%252833%2529.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNpEh92VqztE6PVqzcezi7ZN5WXDvKeiaSsG95FNF1ieiKYR7-jQCnNDDLelQrXy0HrO93TnOd9PRMZo2aJLSfp_GF9thlJ2FS5Kbvfpnb1GR2fY1I1TOt3dZ7vXhh1HyjFygN-cD5sVVV/w250-h200-no/Faceblog+Evolutions+%252831%2529.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 10
CSS
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSscWQRT-jeybapjB-iPdkdAvi4b1ncU0MGLLsxkg5Tv0_tn6ee0py5c412US3_uZi4ljxaQLNhwEGxI87BHSC1KuICLPaziJOyjfLNDmOe98CGGzmTSheNXVrCjR8zjeLS75fJA91SuBo/w300-h200-no/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 250px;
height: 200px;
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: 12px;
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;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
HTML
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOM7CqdfWmIYAEZXjNwbjteSSheLcFBsHRZCy-LoCoD9VrA68ie2ZEjIuNmESOuUo2UJZecffSnbIZ09Ag2Bxy28Hpd0NsI0nllNWU4qBNwlAdjsJlpYjGmK22xRBnmKDbcOF6Vc9xe2-m/w250-h200-no/Faceblog+Evolutions+%252838%2529.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb2edAmAekLf94FJMeW9I3LQR9lWTuHXFnSmclpAeFng3tOb-ZDFRPC_fasVaDYFUCAtgb6IB6Zwg1R_LVOjkHW66WwZP92YCpkSVaAOdmgGO4I4LOc9sQMNsNmvPh6pKspglmfwxs-wt6/w250-h200-no/Faceblog+Evolutions+%252837%2529.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgol1FDIg_E7hyphenhyphenZNf1KDqHWbWRCzqPTbw-z6P63hG1jGxI8K9in1Kaf-CquVxf2eJ4KWmgTsGK_zwFtidqZb046cFNxVvcMjU_VOpagGtTGUBLQOQtaWVUs1o_NZSfym2zaW0ZUmU0BIL-M/w250-h200-no/Faceblog+Evolutions+%252836%2529.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivt-hOxA41kwuI-Lud3mnKPq3XH5wyqmrFNCDvrma0jSBME_xrTqB_iiAvTAbeNWaOqauar_n82CKOTQlg4sZtxWOO1TizWkdy0NRerKQv4jvTBAaC7j1wbKHxBiIjIEagqzvLirlZI9wF/w250-h200-no/Faceblog+Evolutions+%252835%2529.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://mas-andes.blogspot.com" class="info">Read More</a>
</div>
</div>

Berlangganan artikel via email

20 Response to "10 Gallery CSS3 Image Efek Hover Pada Blog"

avatar
MANG YONO
5/16/13, 5:22 AM

wah bagus bagus mas.... nah ini lebih mantep.... tapi pasangnya belum paham ni ... baca lagi ah

Balas
avatar
Unknown
5/16/13, 8:43 AM

keren banget mas, ini tidak memberatkan loading blog ya mas?

Balas
avatar
Anisayu Nastutik
5/16/13, 9:15 AM

wih cantik , buat mataku ketarik-tarik

Balas
avatar
Daihatsu Jakarta
5/16/13, 12:13 PM

Tutorialnya Lengkap banget gan

Balas
avatar
Unknown
5/16/13, 2:22 PM

makin top nih, koleksinya banyak banget. bisa dijadikan pilihan utk mereka yg ingin menggunakannya

Balas
avatar
Unknown
5/16/13, 4:09 PM

Yang hover style 1 cocok banget warnanya ke blog saya mas. Mau saya coba pakai nih. Kalau oke, mau saya pakai permanen. :D

Balas
avatar
K.A.A
5/16/13, 4:14 PM

Jujur saya mengalami kesulitan dalam melakukan ptunjuk di atas. But nice try, emang bener banget esensi suatu BLOG (MANFAAT BUAT YANG MEMBUTUHKAN) #Galau_Coding

Balas
avatar
Unknown
5/16/13, 4:32 PM

Kian hari kian bagus tutor blog nya mas..

Balas
avatar
Just4rt
5/16/13, 8:01 PM

keren-keren efek hovernya mas andes :)

Balas
avatar
Bang Ancis Mobile Device
5/16/13, 8:06 PM

Wuaduh... liat kode2nya bikin pening walopun keren hasilnya... bookmark saja dulu sob...

Balas
avatar
Info Seputar Bola
5/16/13, 8:19 PM

wah manteepp banget mas andes kumpulan css3 nyaa ..

Balas
avatar
penyuluh perikanan
5/16/13, 10:39 PM

mantap dan keren juga hasilnya sob, tutorial yg sangat berguna untuk perlu dicoba, terima kasih sudah berbagi

Balas
avatar
khasiat daun sirsak
5/17/13, 3:43 PM

keren nih tutorialnya, tapi masih bingung nih saya.

Balas
avatar
Unknown
5/21/13, 1:17 PM

yang pake widget ada ga ya.. biar tingal masukin deh ke html haha .. maunya praktis.

Balas
avatar
Mas Andes
5/21/13, 4:00 PM

tambahin kode aja kalo buat widget. misal untuk hover style #1 berarti kodenya kayak gini:

<style>
copy kode css hover style #1 diatas lalu paste disini
</style>
copy kode HTML hover style #1 diatas lalu paste disini

kalo udah masukin ke widget

Balas
avatar
Mas Andes
5/21/13, 4:04 PM

tankyu all brother udah mampir disini.
sukses selalu ya :)

#salam satu untuk semua.
hohoho

Balas
avatar
kalahitam
6/10/13, 3:19 PM

keren gan.. :)

tp saya mau tanya agk out of topics..
saya mau menghilangkan galeri hover di blog gimana ya?
sudah coba di replace atau dihilangkan tp tetap saja muncul.
saya pakai yg nivo style

terima kasih dan salam sukses!

Balas
avatar
Mas Andes
6/10/13, 10:03 PM

tinggal hapus aja mas kode yang di template sama di posting

Balas
avatar
Ichi Hikaru
10/13/13, 2:13 AM

Keren gan ... ijin make plus share ya ...

Balas
avatar
Anonymous
10/28/13, 11:24 AM

demonya keren" gan :) izin nyoba :)

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "10 Gallery CSS3 Image Efek Hover Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode