membuat efek hover pada blog

9 efek hover sederhana pada di blog

simple Hover efek apa itu efek Hover pada gambar? efek hover gambar adalah efek gambar yang akan muncul setelah cursor menunjuk sebuah artikel yang ada di blog tersebut dengan intinya pengunjung dapat meliat gambar terlebih dahulu

1.efek gambar Houver sederhana

• masukan css di bawah ini diatas ]]<?b:skin> atau bisa juga di </style> taro diatasnya

#gambar-seocips a img:hover { -webkit-filter:none; /*Returns to default state*/; }
#gambar-seocips a img.brightness:hover { -webkit-filter:brightness(0); }
.saturate { -webkit-filter:saturate(3); }
.grayscale { -webkit-filter:grayscale(100%); }
.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%); }
.huerotate { -webkit-filter:hue-rotate(180deg); }
.opacity { -webkit-filter:opacity(50%); }

• untuk penerapan gambar misalnya

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

untuk mengganti efek efeknya ganti saturate dengan nama element css yang kalian inginkan efeknya misalnya ganti dengan grayscale atau contrast atau brightness atau dengan yang lain

budayakan bertanya jika tidak bisa :)

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari berbagi tutorial. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow berbagi tutorial dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh blanik pada tanggal Monday, January 2, 2017