Top ten Amazing Gambar Mouse Hover Effects

Anda mungkin telah melihat efek berguling Gambar di banyak blog profesional dan komersial. Dengan berguling Maksud saya, ketika Anda membawa kursor mouse Anda pada gambar, gambar perbatasan warna, dan gaya / penampilan perubahan. Baik menggunakan CSS sederhana Anda dapat menambahkan beberapa efek menakjubkan Blog Anda Images. Tanpa membuang waktu memungkinkan langsung menuju langkah-langkah yang harus diikuti.

and then you will need to add a small HTML code like class="xyz" to the image">Tutorial ini menggunakan pola sederhana untuk menambahkan kode yaitu Pertama, Anda akan perlu menambahkan kode CSS tepat di atas ]]> dan kemudian Anda perlu menambahkan kode HTML kecil seperti class = "xyz" ke foto kode dalam posting Anda.

seperti contoh nya, bisa anda lihat di sini >>klik disini<<

Cara menambahkan Top 10 Amazing Gambar Mouse Hover Effects Untuk Blogger?

Untuk melakukannya ikuti langkah berikut,

1. Layout > Edit HTML">Pergi ke Blogger> Layout> Edit HTML
2. ">Search for ]]>
3. ">Dan sekarang sisipkan salah satu pilihan Anda CSS: kode tepat di atas ]]>

Sekarang setiap kali Anda menulis suatu posting, cukup meng-upload gambar di blogger anda Editor dan kemudian beralih ke mode Edit HTML lalu cari kode ini

Number #1

CSS:

.simple1 {
padding:5px;
border:1px solid #ccc;
}
.simple1:hover {
padding:5px;
background-color:#ccc;
}

HTML:

class="simple1"

Number #2

CSS:

.simple2 {
padding:5px;
background-color:#ccc;
border:1px solid #ddd;
}
.simple2:hover {
padding:5px;
background-color:#eee;
border:1px solid #666;
}

HTML:

class="simple2"

Number #3

CSS:

.black-white {
padding:5px;
border:1px solid #ccc;
}
.black-white:hover {
padding:5px;
background-color:#fff;
border:10px solid #000;
}

HTML:

class="black-white"

Number #4

CSS:

.dashed {
padding:5px;
border:1px solid #ccc;
}
.dashed:hover {
padding:5px;
background-color:#fff;
border:2px dashed #000;
}

HTML:

class="dashed"

Number #5

CSS:

.top-bottom {
padding-top:5px;
padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
}
.top-bottom:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}

HTML:

class="top-bottom"

Number #6

CSS:

.curtain {
padding-top:10px;
padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
}
.curtain:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}

HTML:

class="curtain"

Number #7

CSS:

.red {
padding:5px;
border:1px solid #ccc;
}
.red:hover {
padding:5px;
background-color:#E71305;
border:10px solid #ddd;
}

HTML:

class="red"

Number #8

CSS:

.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

HTML:

class="Fadein"

Number #9

CSS:

.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:2px solid #000;

}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:2px solid #000;
}

HTML:

class="Fadein2"

Number #10

CSS:

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}

HTML: For knowing how to apply this popping effect in detail read this post –> Image Pop-up Effect

100px" border="0px" height="100px">
Image Description here

Anda dapat menikmati bermain dengan kode ini MBT menggunakan HTML Editor. Saya harap Anda akan menemukan tutorial ini sangat berguna dalam lebih meningkatkan cool blogging experience

sumber : mybloggertrick