بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Hover Image dengan CSS3 adalah ketika mouse kita sorot pada sebuah gambar, maka yang terjadi adalah gambar menjadi kabur atau sebaliknya gambar akan menjadi jelas. Jadi gambar jelas menjadi kabur atau gambar kabur menjadi jelas.
Hal ini dilakukan biasanya untuk membuat artikel atau gambar utama pada postingan blog menjadi mencolok tanpa ada gangguan dari gambar lain sebagai pendamping. Karena gambar pendamping akan menjadi blur atau kabur.
Baca Juga : Cara Membuat Gambar Bisa Berjejer kesamping di Postingan agar Rapi
Menggunakan property Opacity maka gambar dengan sentuhan CSS akan menjadi kabur. Seperti halnya penggunaan pada software desain yaitu Photosop dan Coreldraw property Opacity juga digunakan sebagai tools utama.
Sebetulnya banyak trik menggunakan Hover atau sentuhan mouse diatas gambar, seperti gambar menjadi miring, gambar menjadi terbalik dan masih banyak trik lainnya menggunakan CSS. Tapi kali ini saya akan membahas cara membuat gambar menjadi blur.
Baca Juga : Membuat Gambar atau Foto Bergetar Saat Disentuh dengan Mouse
Penggunaan istilah Opacity dalam bahasa indonesia memang berarti kabur. Jelaslah sudah bila menggunakan property ini gambar akan menjadi tidak jelas. Okelah kalau begitu kita langsung masuk ke pokok bahasan utama saja ya.
Kita mulai saja
Trik Opacity CSS Gambar Blur on Hover
Kita masuk ke template ya.
Klik Tema
Terus pilih Sesuaikan : Edit HTML
Cari kode ]]></b:skin> Tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi yang sudah ditemukan
.linkopacity img {
filter:alpha(opacity=75);
-moz-opacity: 0.50;
-webkit-opacity: 0.50;
opacity: 0.50;
border:0;
}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
-webkit-opacity: 1.0;
opacity: 1.0;
border:0;
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.1);
-moz-opacity: 1.1;
-webkit-opacity: 1.1;
opacity: 1.1;
border:0;
}Dan untuk memanggil agar kode bisa keluar dan tampil sempurna di halaman blog, maka kita membubuhkan kode dibawah ini
Misal : <a href="URL blog kalian"'/><img src="URL gambar kalian"/></a>
Maka akan menjadi seperti ini
<a class="linkopacity" href="URL blog kalian"'/><img src="URL gambar kalian"/></a>Nah sudah jadi khan itu triknya. Selamat kamu sudah bisa membuat gambar di postingan blog kamu menjadi blur. Terima kasih ya yang sudah mampir kesini di artikel Trik Opacity CSS Gambar Blur on Hover. Salam.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Trik Opacity CSS Gambar Blur on Hover . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
