Home » Semua Postingan

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 )
( + komentar )

Tukaran Link Bermanfaat Untuk SEO dan Ranking Google?




Apakah benar Tukaran Link atau yang biasa kita sebut sebagai link exchange itu bermanfaat untuk SEO dan bisa membantu kita untuk mendapatkan ranking di Google? Saya kemarin mendapatkan permasalahan ini dari sebuah forum di facebook, dan rasanya cukup penting untuk mereview lagi pandangan saya mengenai Tukaran Link ini....


Apa itu Tukaran Link?
Tukaran link itu adalah kondisi di mana anda
( + komentar )

Apa Itu Google Pagerank Dan Cara Menghitungnya





Apa itu Google Pagerank dan bagaimana cara menghitung Google Pagerank itu? Ini sebenarnya bisa menjadi pertanyaan yang sangat sulit untuk dijelaskan, tapi saya akan mencoba membuatnya sesederhana mungkin.


Apa itu Google Pagerank?
Pagerank adalah sebuah istilah SEO untuk sistem penilaian yang memberikan poin-poin pada setiap halaman web di dunia maya yang dimiliki oleh Google. Poin yang
( + komentar )

Cara Melakukan Optimasi SEO Onpage pada Blog




Cara melakukan optimasi SEO Onpage pada blog sebenarnya sangat mudah jika saudara sudah punya pengetahuannya. Berbeda dengan optimasi Offpage, biarpun anda sudah mempunyai pengetahuannya, tetap saja eksekusinya akan sulit dilakukan.



Apa itu optimasi SEO Onpage?

Optimasi SEO atau Search Engine Optimization onpage adalah suatu istilah dalam SEO, yang mengacu kepada segala sesuatu yang
( + komentar )

Download Template Windows 8 Full Versi

Tutorial Belajar Blog - Download Template Windows 8 Full Versi , Buat kalian blogger yang ingin ganti template blognya,hari ini saya bawakan beberapa template baru dengan type windows 8 yang bisa sobat gunakan,Yaitu Download Template Windows 8 Full Versi. 
Windows 8 SM adalah sebuah Template Blogger Professional yang di desain mirip dengan OS Windows. Terakhir direlease oleh Santa Mars tanggal 7 February 2013. Template ini termasuk dalam kategori template blog paling keren.

Tested on browser!

Windows 8 SM

Windows 8 SM adalah template windows 8 SM pertama direlease.
18 November 2012
Preview

Windows 8 SM Versi 2

Windows 8 SM Versi 2 mempunyai fitur yang sangat lengkap , tetapi fitur music di hapus.
22 December 2012
Preview



Windows 8 SM Versi 3

Windows 8 SM Versi 3 sebagian fiturnya telah diupgrade menjadi lebih bagus.
19 January 2013
Preview

Windows 8 SM Dark Edition

Windows 8 SM Dark Edition mempunyai fitur komentar berbalas dan banyak lagi.
7 February 2013
Preview



Tambahan.!
Pemberitahuan:
Template Windows 8 SM ini bukan buatan saya sendiri,karena disini saya hanya mengarahkan sobat ke arah link template windows 8 SM tersebut,dan jika sobat ada kendala dan kebingungan dalam pemasangan atau penerapan pada template windows 8 SM ini,silahkan sobat kunjungi  situs pemilik template dengan cara KLIK DISINI.

Demikian Share Tentang Template Blogger yaitu  Download Template Windows 8 Full Versi Ini,semoga bisa bermanfaat untuk sobat blogger semuanya.Terimakasih
File Windows 8 SM
Server 1 [ 41 KB ] via Sharebeast

File Windows 8 SM Versi 2
Server 1 [ 41 KB ] via Sharebeast

File Windows 8 SM Versi 3
Server 1 [ 37 KB ] via Sharebeast

File Windows 8 SM Dark Edition
Server 1 [ 45 KB ] via Sharebeast		Linknya Baru Gan
( + komentar )

Cara Membuat Smooth Scroll Back To Top di Blog


Tutorial Belajar Blog - Cara Membuat Smooth Scroll Back To Top di Blog. Bagi sebagian sobat mungkin sudah familiar dengan kata-kata smooth scroll back to top / kembali ke atas. Smooth sendiri berarti lembut. Jadi smooth scroll artinya menggulung dengan lembut. Untuk membuat Tombol Back to Top biasa, mudah saja sebetulnya, tinggal menambahkan kode # akan tetapi kembali ke atas secara langsung tidak lembut.

Smooth Scroll Back To Top ini dimaksudkan sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Smooth Scroll Back To Top ini menggunakan Jquery mungkin pada tutorial selanjutnya lebih praktis


Tidak lupa saya ucapkan terima kasih untuk Mas Abdul Rahman yang sudah berbagi tips ini kemudian saya share kembali karena Tutorial Blog ini Merupakan request dari teman blogger.

Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut :

1. Login akun Blogger anda.
2. Pada Dashboard pilih Template � Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>


<style>

#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#7F007B;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;

-moz-border-radius-topleft: 30px;

border-top-left-radius: 30px;}

#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}

</style>

4. Kemudian letakkan kode berikut ini diatas kode </body>


<div id='backtop'>Back to Top</div>

<script type='text/javascript'>

//<![CDATA[

$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});

//]]>

</script>

5. Simpan Template

Selamat Mencoba dan semoga Bermanfaat Silahkan anda sesuaikan sendiri Baca Juga Cara Memberikan Pesan Aktifkan JavaScript Pada Blog

Thanks To MDF
( + komentar )

Cara Memberikan Pesan Aktifkan JavaScript Pada Blog

JavaScript Disable Warning

Tutorial Belajar Blogger - Cara Memberikan Pesan Aktifkan JavaScript Pada Blog , Sesuai dengan judul postingan kali ini bertemakan bagaimana memberi peringatan Pesan ketika pengunjung menonaktifkan fungsi JavaScript pada browsernya.

Tutorial Blog ini merupakan jalan lain untuk tetap memberi peringatan kepada  pengunjung blog ketika mereka menonaktifkan fungsi JavaScript. Ketika  pengunjung blog menonaktifkan fungsi JavaScript maka sebuah layar peringatan akan muncul dan menutupi seluruh halaman blog, secara total pengunjung blog tidak dapat membaca / melihat seluruh isi konten blog dan hanya melihat pesan untuk menghidupkan kembali opsi javascript pada browser

Berikut Ini Langkah - Langkah Membuat nya :
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"

Contoh Masuk Edit Html

Langkah 3
Cari kode dibawah ini: 
]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:
 /*NoScript*/
#oktriganteng {z-index: 999;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;margin:0;padding:0;}
#oktriganteng p {margin:0;padding:0;width:100%;color:#333;position:relative;top:40%;font:bold 18px/20px arial;text-align:center;text-shadow:none;}
Langkah 5
Cari kode dibawah ini: 
</body>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5: 
<noscript>
      <div id='oktriganteng'>
        <p>
          Oooops!! Mohon Aktifkan JavaScript
        </p>
      </div>
    </noscript>
Langkah 7
Simpan template, nonaktifkan fungsi JavaScript pada browser dan preview blog anda...
Selamat Mencoba Semoga Bermanfaat, Untuk demo blog ini Silahkan Nonaktifkan Browser anda.

Thanks to Hendriono -Tune Up blog
( + komentar )

Emoticon Jepang (SERI 9) Emoji Tidur, Sombong, Kaget, Berpikir, dan Melambai




Dalam seri ke 9 emoticon jepang kali ini, kita akan melihat variasi emoji untuk Tidur, Sombong, Terkejut, Berpikir, dan Melambai. Silahkan dilihat koleksi di bawah ini, barangkali ada yang ingin anda gunakan untuk menghias status facebook atau blackberry anda.


Emoticon Jepang 41: Tidur

Kalau anda sedang mengantuk atau mau menggambarkan kondisi tidur yang nyenyak, maka emoticon yang satu ini
( + komentar )

Emoticon Jepang (SERI 8) Emoji Unik, Berlari, Sedih, Ketakutan, dan Malu




Dalam seri ke-8 emoji kali ini saya mau melampirkan emoticon jepang Unik, Berlari, Sedih, Ketakutan, dan Malu. Kumpulan emoji ini ditujukan untuk membantu teman-teman mengekspresikan perasaan dengan mencopy gambar-gambar di bawah ini ke dalam status facebook, ataupun media lainnya.


Emoticon Jepang 36: Bentuk Unik
Kategori ini mengumpulkan emoticon jepang yang diperoleh dari pembuatan acak
( + komentar )

Emoticon Jepang (SERI 7) Emoji Aktifitas, Binatang Lain, Emosi Lain, Babi, dan Kelinci




Dalam seri ke-7 Emoticon Jepang ini ditambahkan cukup banyak emoticon yang sangat bervariasi. Ada emoticon berbagai aktifitas, binatang tambahan, emoticon tambahan, babi, dan kelinci. Jadi silahkan dipilih yang sesuai dengan selera anda.


Emoticon Jepang 31: Aktifitas

Ada banyak sekali aktifitas yang diikutkan dalam kategori ini. Terkesan campur-campur karena rasanya tidak ada kategori yang
( + komentar )

Emoticon Jepang (SERI 6) Emoji Cinta, Capek Deh, Monyet, Musik, dan Kumis




Dalam kumpulan emoticon jepang kali ini kita akan melihat koleksi Emoji Cinta, Capek Deh, Monyet, Musik, dan Kumis. Koleksi pada seri ke 6 dari 10 seri emoticon ini akan membantu anda membuat status facebook atau postingan di blog menjadi lebih hidup.


Emoticon kali ini akan dimulai dari urutan 26. Bagi yang ingin melihat urutan 1-25 baca seri 1-5 pada artikel terkait di bawah postingan ini.
( + komentar )

Emoticon Jepang (SERI 5) Emoji Hari Raya, Pelukan, Kesakitan, Cium, dan Tertawa




Dalam kumpulan Emoticon Jepang Seri 5 ini akan ditampilkan kumpulan ekspresi untuk Hari Raya, Pelukan, Kesakitan, Cium, dan Tertawa. Silahkan digunakan sesuai keinginan teman-teman.


Emoticon jepang ini akan dmulai dari nomor urut 21. Untuk melihat nomor 1-20 silahkan baca seri 1-4 di artikel terkait di bawah postingan ini....


Emoticon Jepang 21: Hari Perayaan

Berikut ini adalah kumpulan
( + komentar )

Emoticon Jepang (SERI 4) Emoji Makan Minum, Pertemanan, Menyerah, Bahagia, dan Bersembunyi




Kumpulan emoticon Jepang seri keempat ini akan menampilkan berbagai ekspresi untuk acara makan minum, pertemanan, menyerah, bahagia, dan bersembunyi. Silahkan dilihat koleksi di bawah ini dan dipakai sesuai dengan ekspresi yang anda inginkan.



Kali ini akan dimulai dari urutan jenis ke 16. Untuk melihat urutan 1-15 silahkan menuju seri 1-3 yang ada pada artikel terkait di bawah postingan ini
( + komentar )

Emoticon Jepang (SERI 3) Emoji Mati, Anjing, Jahat, Bersemangat, dan Makhluk Laut






Emoticon Jepang
Seri Ketiga ini menggambarkan berbagai ekspresi seperti mati, anjing yang imut, wajah jahat, orang bersemangat, dan makhluk laut. Lumayan untuk melengkapi seri yang sebelumnya. Silahkan dicek saja koleksi
di bawah ini....


Emoticon Jepang 11: Mati

Ini adalah emoticon jepang untuk mengekspresikan kematian. Biasanya anda akan melihat ekspresi seperti ini pada anime-anime
( + komentar )

Emoticon Jepang (SERI 2) Emoji Karakter, Awan, Bingung, Menggila, dan Menari




Emoticon Jepang
Seri Kedua ini menggambarkan berbagai karakter seperti zombie, gangnam dan lain-lain. Ada juga karakter tidak jelas seperti awan.... Selain itu juga ada beberapa ekspresi yang bisa anda pilih seperti orang yang sedang kebingungan, menggila, atau menari. Silahkan dicek saja koleksi di bawah ini....

Kita akan mulai dari urutan 6, karena urutan 1-5 ada di seri 1 emoticon jepang
( + komentar )

Emoticon Jepang (SERI 10) Emoji Berkedip Sebelah Mata, Kuatir, Menulis, dan Tawa tidak Jelas




Ini dia seri 10 dari emoticon jepang yang menampilkan emoji untuk Berkedip, Kuatir, Menulis, dan Tawa Tidak Jelas. Emoticon ini akan menjadi pelengkap 10 seri emoticon di blog ini dan melengkapi 2500 lebih emoji yang bisa teman-teman gunakan.


Emoticon Jepang 46: Berkedip

Untuk mata berkedip sebelah mata anda bisa menggunakan emoticon di bawah ini. Emoticon jepang di bawah ini adalah varian
( + komentar )

Template Blogger Dengan Style Metro Windows 8

Tutorial Belajar Blog - Template Blog Dengan Style Window 8 sekedar share tentang template blogger yang bertemakan Window 8, yang akhir akhir ini di tahun 2013 lagi trend ataupun naik daun tidak hanya sistem operasi tetapi banyak bermunculan blogger profesional membuat template blog mengadopsi tampilan desain window 8. Berikut ini beberapa template blogger bertemakan Style Metro Window 8

1.Metro Simple Blogger Template
Template Preview | Download
 
2.Metro BTK Premium Blogger Template

Template Preview | Download
3.Windows 8 v2 Blogger Template

Template Preview | Download

4.Metro Modern Solar Blogger Template

Metro Modern Solar Blogger Template di buat oleh  BlogThietKe . Metro Modern Solar  menggunakan warna abu-abu sebagai background dan  sedikit tambahan warna hijau di Kategori atau label.Template ini  sangat cocok untuk  blog pribadi atau blog berita teknologi. Seperti yang saya kutip langsung dari BlogThietKe, Template ini Terinspirasi oleh interface Metro Windows .

Template Preview | Download

5.Metro UI Blogger Template

Template Preview | Download

6.Metro Blogger Template

Template Preview | Download
Bonus Template in your Website

  • Windows 8 Matrix style HTML Template ( Its cool )
Live Demo |  Download

Semoga Bermanfaaat. Terima Kasih sudah Berkunjung di blog ini Semoga Bermanfaat 
Salam Blogger ( Mas Oktri )

Thanks to s2free.blogspot.com
( + komentar )

Emoticon Jepang (SERI 1) Emoji Marah, Maaf, Beruang, Burung, Kucing




Emoticon Jepang Seri Pertama ini menggambarkan emosi marah, minta maaf, beruang, burung, dan kucing. Emoticon ini sangat sesuai untuk menghias status anda di facebook, atau juga di blog. Langsung saja lihat berbagai koleksi di bawah ini....


Emoticon Jepang 1: Marah!

Kebanyakan emoticon jepang yang menggambarkan perasaan marah menggunakan tanda > dan < untuk mata. Anda juga bisa menggunakan
( + komentar )
 
Dengan berlangganan Newletter kami secara gratis. Anda akan secara otomatis mendapat Update terbaru dari artikel-artikel terbaik kami.

Address

PT. Sobatyan Corp Media.
Jln. Pongtiku No 78 rantelemo.
Email : cs@sobatnyan.com
Twitter : @SobatyanCorp

About Us

Sobatyan Corp adalah Media yang menyajikan artikel yang bermamfaat bagi seluru khalayak internet. SC menyajikan informasi secara real dan terpercaya, memberikan solusi yang baik, membetikan inspirasi kepada semuah orang.
Copyright © 2015. Sobatyan Corp - All Rights Reserved
Design by Novriyan Tangke Powered by Sobatyan Corp