Cara Membuat Efek Tag ALT Gambar Membesar Ala Kangsigit

Bingung nih mau kasih judul apa artikel yang satu ini, soalnya saya dapat ilmunya dari bereksperimen. Yang jelas pada postingan saya kali ini ingin mengulas tentang bagaimana caranya agar teks pada gambar atau lebih tepatnya tag ALT "" gambar membesar ketika disorot mouse. Soalnya nanti yang akan membesar bukanlah sebuah teks ataupun gambar, melainkan hanyalah tag yang ada pada gambar tersebut gambar.

Biar lebih jelas saya kasih gambarannya saja, biasanya kalau kita hendak memberi sebuah judul/ title pada sebuah gambar maka kita perlu menambahkan  title="blablabla" Sedangkan untuk memberi deskripsi maka perlu adanya penambahan  alt="blablabla"

Intinya, pokok pembicaraan kita kali ini adalah tag ALT nya saja. Jadi kita tidak perlu mencari sumber gambar karena trik ini tidak perlu adanya  SRC=""

Sebagai contoh bisa Anda lihat tiga ALT diatas. Ketiganya saat disentuh dengan mouse akan membesar dengan sendirinya. Namun tidak akan mungkin bisa di copy paste meski Anda menonaktifkan javascript pada browser Anda.

Mengapa demikian? Karena yang Anda lihat tersebut bukanlah sebuah text. Itu menyerupai sebuah gambar yang tidak memiliki sumber link.

Seperti yang telah penulis singgung diatas, ini merupakan pemanfaatan dari deskripsi gambar, atau yang sering dipaka oleh blogger adalah TAG ALT.

Bagaimana cara buatnya dan perlukah javascript untuk mengeksekusinya? NO.!
Trik ini hanya membutuhkan sedikit CSS dan perlunya tag IMG untuk memanggil CSS tersebut.

Berikut CSS yang diperlukan.
<style type='text/css'>
.KSzoom img{
-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
border:inset 1px #ddd;
border-top:inset 3px #ddd;
border-right:inset 3px #A09A9A;
border-radius:8px;
color:#333;
vertical-align:middle;
}
.KSzoom img:hover{
-webkit-transform: scale(1.3);
background-color:#fff;
color:#333;
border-right:inset 3px #A09A9A;
cursor:pointer;
}
</style>
Dan berikut HTML pemanggilannya
<b class="KSzoom"><img alt=' TANPA LINK '/></b>
Anda juga dapat menyisipkan link kedalamnya.
<a href="http://www.kangsigit.com" class="KSzoom" style="cursor:pointer"><img alt=' PAKAI LINK '/></a> 
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini