Kuroi KENSHIN
KUROI KENSHIN
HTTP://FARANYMBOBOIBOY.BLOGSPOT.COM
posted by Fara_nym | Hyoukurona Thursday, 16 October 2014 @10:20 pm 0 comments
Tutorial: Filter image hover
Assalamualaikum,
konbanwa!

ok, hari ni tuto simple je. Gambar akan titambah filter apabila dihoverkan.

tapi, kena ikut steps ni dulu baru pilih filter apa yang korang nak.
tapi seelum tu korang kena tau ada 2 cara tau! !

   Cara 1: hanya image di dalam post sahaja yang boleh dihoverkan 
   Cara 2: kesemua image dalam blog boleh di hoverkan! 

1.1. Dashboard > Template > Edit Html > Click icon yang mcm ► > Ctrl+F / f3 (Pastikan anda click dlm kotak html dulu sebelum tekan Ctrl+F /f3 ) > masukkan code di bawah dan ENTER
h3.post-title {

1.2Pilih filter yang korang suka then copylah code yang Fara bagi the paste kat atas code h3.post-title {
________________________________________

2.1. Dashboard > Template > Edit Html > Click icon yang mcm ► > Ctrl+F / f3 (Pastikan anda click dlm kotak html dulu sebelum tekan Ctrl+F /f3 ) > masukkan code di bawah dan ENTER
a:link {
2.2 Pilih filter yang korang suka then copylah code yang Fara bagi the paste kat atas code a:link {

Filter 1 : Grey scale

Cara 1
img{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-filter: grayscale(0.5);}

Cara 2.
post img {
webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.post img:hover {
-webkit-filter: grayscale(0.5);}

Filter 2: Sepia


Cara 1
img{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-filter: sepia(0.5);}

Cara 2.
post img {
webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.post img:hover {
-webkit-filter: sepia(0.5);}


Filter 3: blur


Cara 1
img{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-filter: grayscale(0.5);}

Cara 2.
.post img {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;transition: all 0.4s linear;
}
.post img:hover {
opacity: 0.5;
-webkit-transition: 0.5s; }
3. SAVE! and tada~ Done.

Good luck. **winkwink

Labels:


FARANYM | HYOUKURONA 2017