15 Efek Hover Lengkap Pada Gambar Di Blog

Simple Hover Effect. Apa itu efek hover siapa gambar? efek hover ini gambar siapa adalah ini demo ke tebak gambar, point blank, aikatsu dan lain-lain pada gambar muncul kursor mouse aku ini gambar. pada kesempatan ini aku gambar demo 9-15 keatas efek hover pasang 15 efek hover lengkap pada gambar, efek-efek ini seperti saturate 1-3, grayscale 1-2, contrast, brightness, blur, invert, sepia 1-2, huerotate 1-3 dan Opactiy.

Efek Hover Lengkap Pada Gambar

masuk css di bawah ini diatas </style>

#gambar-maharani a img:hover {filter:none; /*Returns to default state*/;}
#gambar-maharani a img.brightness:hover {filter:brightness(0);}
.saturate {filter: saturate(3);}
.saturate2 {filter: saturate(2);}
.saturate3 {filter: saturate(800%);}
.grayscale {filter: grayscale(100%);}
.grayscale2 {filter: grayscale(50%);}
.contrast {filter: contrast(160%);}
.brightness {filter: brightness(0.25);}
.blur {filter: blur(3px);}
.invert {filter: invert(100%);}
.sepia {filter: sepia(100%);}
.sepia2 {filter: sepia(50%);}
.huerotate {filter: hue-rotate(180deg);}
.huerotate3 {filter: hue-rotate(90deg);}
.huerotate2 {filter: hue-rotate(270deg);}
.opacity {filter: opacity(50%);}

Atau mendukung Sini Chrome, Safari dan Opera. masuk css di bawah ini diatas </style>

#gambar-maharani a img:hover {-webkit-filter:none; /*Returns to default state*/;}
#gambar-maharani a img.brightness:hover {-webkit-filter:brightness(0);}
.saturate {-webkit-filter: saturate(3);}
.saturate2 {-webkit-filter: saturate(2);}
.saturate3 {-webkit-filter: saturate(800%);}
.grayscale {-webkit-filter: grayscale(100%);}
.grayscale2 {-webkit-filter: grayscale(50%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.sepia2 {-webkit-filter: sepia(50%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.huerotate3 {-webkit-filter: hue-rotate(90deg);}
.huerotate2 {-webkit-filter: hue-rotate(270deg);}
.opacity {-webkit-filter: opacity(50%);}

Untuk adalah pada gambar contoh:

<div id="gambar-maharani">
<img src="ini diisi dengan link gambar milikmu" class="saturate" />
</div>

Untuk Ganti Efek Disini

saturate,saturate2,saturate3
grayscale,grayscale2
contrast
brightness
blur
invert
sepia,sepia2
huerotate,huerotate2,huerotate3
opacity

Selamat Memcoba Efek Hover lengkap

Backlink SEOCIPS