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).

.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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEjCjPYwAC9O_5bvrZHfXJrunHNAfzQrt8QyTCQ_Ot2Y9znyGRrUXT2ZVXqEpI7-bz14kzbzYEePcqtbnRxjmyyzkfOpbAbQD0v-UkWXmWEev4eAobOv5OuJfCncAAIGhmiZqNiEfHZrFodP/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBzEVE7Cnd-RAQr-4MvluxieWWMxjN-31W-YNutFGMUE_pJMfRQpRLZpspjDDrqrkVz8T_20P2nppazGKOaWoRdYunXEcXL8ZNNb9hEGa4250tNxgYJXytHMxz2jK4fu9jqaHQ1B6zKOH/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnU0VEpLy6atEHxX2Yp1-jodq9qQVqM250DjsPucGL5TR2ztXKhOlQOM4OEJVSnMpm0EIgHt9vqBzUYPiwKQO7IN8KAlBr715qxSI5bVw5htgyfZzLnsvRJNMnhDQacydCjXhH8m3u6AYv/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZttvYmtp4-08e3SsALOoOM0xpEGcjeGhnIKAXueUyknW5JVaAzpW1wEpbThEqcs9HpUO0O2TYY7OOmqrXFBzL5LY4sRKCnx7GunJT2Nya2BaxP5aPo1IQR-AhWdFc4SrDwUpkj14KkIBS/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>

Keterangan:
Ganti "http://digratisan.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  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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEgHFYEYA1y3nPj_cs8gE5F2zm44ZeoBbkqXCVZvr4_8chmuDtD5lGPXOv6P-rmCqNYVEsXQXs5hjnMkGrdppM1plQQBbMcBJGjppyhZsPXgZbBn0zn_dp82hbPlbuCM5JBViOkTftFuVVkX/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeDmX0Xz6PdDMGHAEIr3lx7gUIyDg2S17C1Gdx8xkeWZH7zeXeFTFjm1go1_Ki5tdNF_iXwh5EduOth3qCI0TFBuB2hWuzuRBWXNS3E9_X7ZyQZL5XV5dN1CwifBxRBZAIq0qRLBVQrgKw/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1lgGzVMqXU0U84HNui4aTWgRdbvBmlk6bkcVrWlS7fWp-3s4vCJ_l5p8f4LfwGHMLOeDs8Cipl2yxGT3XqUa5lWOVrEHK2o4xmXS1hCMtrd3ne9H2odRlXgcoumlu2la9aznmZ0snCjkQ/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4NNy_TVVvFZWOja5G1jBFbqVfUr81IWQ-V4CBWFFfqBB3WduRMz-VpmgcSWT4dbr11XiBtqRUEpj1pTTQTWqALaB9kUrPtZxIJEX3E75RNdDh_CEiquB_HZNc6rdR3SCWmoXouv_jY5IX/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://digratisan.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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEhLcN-MpUoB7Y1rvYpDfZuw_pRdKwpTY4EyYCr3mldTUVZ-GHQcSIQOuGD7dM8lI40x3A__YWr9VTbmiZZd4bMYop2_VbCBEh6MxOh-5w5bJ46bV74QpXEF0_XK5CCjLBn9E1v2U8qjA_JX/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIAsjECT0PF54JEje84-gycbtVQ14pZVFDLqAzkTDTh4po3AXUlcy_3Gj3oVhdccsVRTH2iZtmSsFvUdEuZfr0_9HUOf-zhKZJvW_emp5G_4Zs4ZdITGxVOWb6ZTCvH_IHA0Q66aocDl58/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHFYEYA1y3nPj_cs8gE5F2zm44ZeoBbkqXCVZvr4_8chmuDtD5lGPXOv6P-rmCqNYVEsXQXs5hjnMkGrdppM1plQQBbMcBJGjppyhZsPXgZbBn0zn_dp82hbPlbuCM5JBViOkTftFuVVkX/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdAtIiM1MdkvqYnxrn1KDXAPhqLUoqRlm_Z3pCfvVhuSpPdcWMolOBpV5oTRyifwSYa28OV8QUCgyMKO6L_0fb4lEp5wkE5QnQV1Sw7UuRO-VzznEvfABKyaa6wr6R1LKbzj_umuIEO4PF/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://digratisan.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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEg5VtbyYup5weuPEL_t-nl2ThmnOHadcb9-a1-cyLYlCRSUlxaKj55mLGi4I98MHxaGy5K670lhk1cSCoBRPaLC3vNnCxsdqiDK1J2xbsYeC5pbQiU-ydx2vNST3fGHEvvWZ5UNZVCeT5Lc/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqggcd2gOPbH11gKgve4GTTQdQPTh7v9-hKFdKeBiwfgGhV-BYNnsp6HQwHej7YHPbQS0F0P5-utbaag1Rv8ywMv0LvaLD1iReEDYtLJh6A9R01ht1iJA_uUR3n8B5CYIl4nubqmm4USDv/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA7ZqCKkAUJ8VdaDPpjebkxeQmmskwjITOxwiBUkknajKOyprdOdWETCQfkUhP20HdgZPZLiZFRqyVeZZxrrxlzbPIxs_WE7QSG8DqEoxBezUT_pbBEHWcAq8Vhhyphenhyphenu_4tuSYzwF7OilU74/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1FUfc502OYpFJJTWlAC5BpxbUvrDBL27sLHY_ZKIXlrmgqtR0FDnDtQTfpnr0uWPZWET498dNtggBVLtrsZmdruv1ZW18OuRsWvJG5y_ezlCVcQWtjiIupWi-JO3HN9rYkJL2zokGQG_c/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://digratisan.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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEjjynKZXNlU8qhKR7Tf9yjsOlVoMuIftv8nXkfzrhchfhlEfl5FX5jiQLCpRjVdbY5S9b_jAHChZzIWqQsZ09GV5VPDSWZb3vBnBk-_E2H2GWExBp7yafNgA57lVk3jZycBcGisw5qpcTGR/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikfPQD1TGVOYwyuPmD6uDecGn6eSpbStfgdVYviSGtKm6miG-jq1HT0OYsELDfPGoEupmUxPM5SG7fr0H_YdS-z0tzT55aK4F2tRP6kdkGx2O5tLiPHd2mttTCIOkEABSICSzOeyqHGWIy/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXehs5ntEJ5fmojFIjxzwd1k0_hKioYgHyzku_5KiP4zFbCfUOq8vzUDDTgKq8JbBsxh5fE5UUZqQ8jgcQOa1bAe-gvAj0PB0fsCmBf6whENEb1g_xUJVcsa6NvLtVSkVrgUcy00AoP3W/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkdEKkgPBsvTETFyTniGCyChmqJ5ne6DBoo7NaVdmrEFAtk3c90NP6jHK0laiIHfBkCxtCrHcYe8nRjxnGWmndsrScfOrczk4GREFNvb_gpJe5kht2fyrf7FmZ62g9tRtXw7vep33hHu1U/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://digratisan.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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEjiYE22dhvSCM4Qhqf3p2tePqFZRxgIT69O-vRVzyTJZxd7r3lh5daRMz80kAV7IUph5IUnQEmZY1Dvwg3xLNF4zXL09YpU7sxb9AzFneudaSEIYJ8AWelWk2Jgn4962t6tOulSKrHpqlv9/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_CoFO_PxiqcpdfZ39rCRrV5cZOGDNK-Dn_zU1oBKAr79Pq2etLJo7pe5bXTTyTrlia5hnFP4BUxOiOvOhyphenhyphenEdNRwsL0Uw5juy5J-tkdpIvxqz2OcW6R2eeVSgE8Ii4xjpINAkJKzfiRUuA/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3RMVGBl3Qy8W4EkOady7biCQbj_-5vAv8g3ZxZKczwtYk3YyWl1zgG6LnBHjcYi8QtzhUwhX9K24_ErsvXkvP2-g4wgowPzx6HynoKT-__BaVL8gQBu_BWdc8ifLKsxcFFBldrxHz95zP/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3GWx_ux1e5VJKKIva0BRT1TDa5VpM8Z8jMxDdIsizCWO0OzOnumAjuC_E_cwBvoGQGEBZWNIRTBzRcPp8u9OmJ4U95oKm8Z7eALA8girrxC6GxYJeTfz1oZcpo50ZJmJC7y0WyZUJ45Mw/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://digratisan.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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEjygUSfpuSwQ11L7vOBepE-ojzH9cU2d8jncMxdH6JCAU6eGhqxOe631HKUCSnivjo9wgWJhcf1RPDOPe-Jub2xueOxwp7BVeZYKOLNOOMMz5Dcs-IzXJtxRVguGGXuHaESi-RUXW5u6F1w/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvXeyn55XTiUoYBdb_TldAQYtZNk7EIMDebb_CR14eyh36wat6H2aann1BvzMuTHxtuVd-vj6l4gf_fNsId-vKywYFE1IJh9VsRKOaG3sYcfQWIxPdPzoxnn4R6g-dsUCDtsvLGNEApKlv/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXd7UnuADqpTAs1p7NX1qEeh6oz0cZmwmq2GghzrgG20CVN3TBVzbjVkGOSrnkHs_B2M_Lr2A3jXcaA20n2n7Yc8XHhtYZc0DCRVCpoMLj6fpiVfjgnDn5_jnfwqDgsAyLsSbxW4yNiTYS/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9wlJ2ZXxShsbnm8YNWYusU7U6k5V6ZGFzAAT8YvQuA1oDZLCVznUq47yBmH4-i3mOkeofHXA9EjdRexk9tWcBr4rqYawlPPJANk52ZgLGOST9aGycfIfLGIUpmlbi8GliKEtWoq-Mxlii/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://digratisan.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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEj32Qqctkf1KPwfeLKMb5kuvfyXewR9p7j_ML8Ns97n2Lc_B_56dBDk2-fvFTBbIPGPXizYeO3ekNKXU7Voh2gWFJKDl6iaekMppxwiT86Enzw1gbk2oEjqMRzv5yS3ywctJRPYtQhgDqn7/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPpCNZc_ylpPUTUuygMGSTRr86CSxSTLK4ZND1t0NEGAJh_qNAYPK9cZx_cvcqi4uU5RmzarjbU0qFjlJMFUAxf1kh1jX7ySBCgsKxGa7pYSXSNJoXrMKmIV6Sj8iCYOP0JSSbUL2YXzk6/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeIxjhvZVZ7mI2sFMkxxYsY63-jVaY6dEhcGzCekTgpg502tg3C12_jBMVAFzUQ4Pm5ePM1dU34VBszvByn4Rh-b0xpHIjppqoPw7n77R0j_K9w2M1HvstQ1lhHQrJX7uP1w1KbsYjeWn0/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioOrw4F3fAoj-wqMIIo1GL4dV80TVPVjEAyG3Cs4Qvkq2eTN0q5FRy8KWcMJ0V23VUCy1zeYETUqok6fNM2vY0SW-XQljF-iElrPGGpc5TirsrSC4M9F7QTMwsBGlAomOqvhhRWm-gZdq5/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://digratisan.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/AVvXsEjwcx9JYLwF-WFpvDQvrobdxFsWftJsqw7kdeAC0V_uAYy05k6Unc7HOvW09pj2EssAyxDPFQx0eYu_D5fKMavDf0EwTRPd8nMoANZyvrzO6HUAOWFMiB7QWH3BHoFXmwT1iJKjSgH_5ggd/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/AVvXsEgPXAmkcKPUvdcTpx0iwdwevCYVrGCe94Kth38YI6uV_6igNA-4wKWh2J3RSNgN3bGBgMTRZjNdavikkX1VWsMR7UU473ABdZldki0ZV3ICyvjS4IZp3UfKM-b2lBHzgJZbM7DHHaBD1Exx/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeT6UTXM-UDf9QCDoZbQ6evxaRRVlUxP_xjx1PCh698DnQwxWZ-57zSVHxDbViiIkW7a-Xa7cpZgvreA9qKFOmTgDShOue0Xog8wvldeXQdKBeBkmIGSkPOVElwf8RrVjWra6Yrk02PvVF/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG8RhcnwtNrCdMHXlZtWeXWkQrgPuW5omc6WV6bCIhF5IalrYVIAvSV-SBIKR1pXRHlw3UZCl-gKpkIQ01kzBmhAo6iC3rjPeUwKA2zrgymsapBZxlbV6rB9beey3MP7b-obeCVN9vB8uB/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC197EUPBmc-LTSlPSMLkpiwTBLxXopQAOUe2SbSstyaTh7v01CZr2vzbMbD0KvK5ctyvsiNwTDmX-tXSEbTbvh2_08lCq1NAn0nV31kR5GFm5XT-nG2fgpty3cDdkDlRoXQsJUXG-OlOE/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://digratisan.blogspot.com/" class="info">Read More</a>
</div>
</div>