Cara Membuat Gallery Gambar Efek Hover Pada Blog

Contoh Tampilan Gambar Efek Hover Lebih Menarik

Tutorial Belajar Blog - Cara Membuat Gallery Gambar Efek Hover Pada Blog, Sekilas Tentang Galeri Gambar Efek Hover apabila Mouse diarahkan pada gambar akan muncul deskripsi, atapun bisa juga contoh demo gambar yang kemudian bisa di berikan link untuk menuju ke suatu alamat link yang lain.

Sedikit gambaran apabila kita ingin upload gambar yang lumayan banyak dan dengan ukuran yang relatif tidak sama kemudian di upload kedalam suatu postingan tentu tidak maksimal rapih ataupun teratur, apabila 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. Postingan Ini Terispirasi dari tympanus yang telah memberikan judul Original Hover Effects untuk lebih jelas nya bisa di lihat demo dari web tersebut.

Langkah - Langkah Untuk Membuat Gallery Gambar Efek Hover

1. Login ke akun blogger anda
2. Klik Template » Edit HTML
3. Tambahkan KODE CSS Animasi Loading Blog ini diatas ]]></b:skin>
.view {
width: 250px;
height: 200px;
margin: 5px;
float: left;
border: 10px solid #000;
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: #000  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;
}
4. Kemudian Langkah selanjutnya klik Entri Baru, lalu copy kode dibawah ini kemudian paste di kolom posting mode HTML
<div class="view view-first">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktriprewed.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktriprewed.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktriprewed.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-first">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktriprewed.jpg" />
<div class="mask">
<h2>Hover Style #1</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
Keterangan:
Ganti "http://tutorialbelajarblogger.blogspot.com" dengan URL halaman yang di inginkan. Jika sudah sesuai silahkan klik Publikasikan.

HOVER STYLE #1 :



Hover Style #1

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #1

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #1

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #1

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

























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


KODE HOVER STYLE 2


Hover Style #2

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #2

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #2

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #2

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More
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: #000 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://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri1.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri1.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery.</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri1.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Mas Oktri - Tutorial Belajar Blog | SEO | HTML | CSS | jQuery</p>
<a href="#" class="info">Read More</a>
</div>
</div>
<div class="view view-second">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri1.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</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: #000 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="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri2.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri2.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Faceblog Evolutions - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri2.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-third">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri2.jpg" />
<div class="mask">
<h2>Hover Style #3</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 4


Hover Style #4

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #4

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #4

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #4

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More
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: #000 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="http://i634.photobucket.com/albums/uu66/oktri_2009/oktridarmadi.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/oktridarmadi.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/oktridarmadi.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fourth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/oktridarmadi.jpg" />
<div class="mask">
<h2>Hover Style #4</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.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: #000 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="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri3.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri3.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri3.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-fifth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri3.jpg" />
<div class="mask">
<h2>Hover Style #5</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.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: #000 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="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri5.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri5.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri5.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-sixth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri5.jpg" />
<div class="mask">
<h2>Hover Style #6</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.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: #000 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="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri5.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri5.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri5.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Mas Oktri Ganteng- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com" class="info">Read More</a>
</div>
</div>
<div class="view view-seventh">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri5.jpg" />
<div class="mask">
<h2>Hover Style #7</h2>
<p>Mas Oktri Ganteng- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.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: #000 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="http://i634.photobucket.com/albums/uu66/oktri_2009/oktridj-1.png" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Mas Oktri Ganteng - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/oktridj-1.png" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Mas Oktri Ganteng - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/oktridj-1.png" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Mas Oktri Ganteng - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-eighth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/oktridj-1.png" />
<div class="mask">
<h2>Hover Style #8</h2>
<p>Mas Oktri Ganteng - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>

KODE HOVER STYLE 9


Hover Style #9

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #9

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #9

Mas Oktri- Tutorial blog | SEO | HTML | CSS | jQuery
Read More

Hover Style #9

Kiat-kiat berbisnis yang aman yakni keyakinan, pikiran dan emosi, keputusan, tindakan serta hasil.
Read More
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: #000 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="http://i634.photobucket.com/albums/uu66/oktri_2009/oktridarmadi.jpg" />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Mas Oktri Ganteng - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src=" http://i634.photobucket.com/albums/uu66/oktri_2009/oktridarmadi.jpg " />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Mas Oktri Ganteng - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src=" http://i634.photobucket.com/albums/uu66/oktri_2009/oktridarmadi.jpg " />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p>Mas Oktri Ganteng - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-ninth">
<img src=" http://i634.photobucket.com/albums/uu66/oktri_2009/oktridarmadi.jpg " />
<div class="mask mask-1"></div>
<div class="mask mask-2"></div>
<div class="content">
<h2>Hover Style #9</h2>
<p> Mas Oktri Ganteng - Tutorial blog | SEO | HTML | CSS | jQuery </p>
<a href="http://tutorialbelajarblogger.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: #000 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="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri2.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Mas Oktri Ganteng- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri2.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Mas Oktri Ganteng- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri2.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Mas Oktri Ganteng- Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>
<div class="view view-tenth">
<img src="http://i634.photobucket.com/albums/uu66/oktri_2009/tutorial%20blog/masoktri2.jpg" />
<div class="mask">
<h2>Hover Style #10</h2>
<p>Mas Oktri Ganteng - Tutorial blog | SEO | HTML | CSS | jQuery</p>
<a href="http://tutorialbelajarblogger.blogspot.com/" class="info">Read More</a>
</div>
</div>




Demikian Tutorial Blog Cara Membuat Gallery Gambar Efek Hover Semoga Bermanfaat
Mas Oktri ( Tutorial Belajar Blog )

10   komentar

wawwwwww kerenn...........
Reply Delete
postingannya sangat bagus,

tpi maksudnya :
4. Kemudian Langkah selanjutnya klik Entri Baru, lalu copy kode dibawah ini kemudian paste di kolom posting mode HTML

apa ya ?? penjeasannya dan mohon di perjelas, terima kasih
Reply Delete
amazing....kereeen deh bisa wat nambah-nambah Tugas Akhirku. tHanks Maaaas
Reply Delete
mantap kang . :v referensinya dary tympanus.netya kang ?
Reply Delete
mas gimana caranya kalau dijadiin blog galeri. jadi galerinya berisi postingan kita yang jika di klik menuju halaman asli postingan kita?
Reply Delete
mas gimana caranya kalau dijadiin blog galeri. jadi galerinya berisi postingan kita yang jika di klik menuju halaman asli postingan kita?
Reply Delete
albhetawie-store.blogspot.com
disitu saya pakai tempale gallery anda,.masalah saya...
link foto berasal dari postingan saya dan on klik,.namun foto yang di gallery beranda tidak fix / foto tidak sesuai template CSS...

kedua, bagaimana jika saya ingin menghapus teks "beranda" dan "tidak ada data entry" yang berada tepat dibawah gallery ???

terakhir,.saya ingin template blog saya hanya ada header,gallery,sisi kanan dan footer...

mohon solusi,.terima kasih
Reply Delete
Anonim mengatakan... 25 Oktober 2014 pukul 20.37
Cakep gan, izin praktek
Reply Delete
keren, pokoknya...
lanjutkan, ini sangat berguna bagi kami terutama buat kami anak-anak kejuruan... :)
jangan lupa kunjungi blog saya juga ya.. tapi masih sederhana
http://aminnudin12.blogspot.com
terimakasih....
Reply Delete

Posting Komentar

Cancel Reply