بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Teknik Mata Ikan dalam bahasa CSS adalah membuat gambar yang disorot mouse menjadi lebih besar dari semula. Seperti mata ikan yang menonjol keluar. Teknik yang sangat bagus.
Dalam beberapa kasus terutama untuk menampilkan view gambar, teknik ini dirasa perlu. Mengingat pembesaran gambar diperlukan ketika kita membutuhkan view gambar supaya lebih jelas terlihat.
Baca Juga : Efek Fade In CSS Tangan Mengepal
Jadi kinerjanya dari CSS ini adalah ketika mouse kita sorot ke gambar yang sudah dibalut kode CSS ini maka gambar itu akan membesar. Dengan begitu akan semakin jelas terlihat bukan.
Supaya lebih paham akan CSS berikut akan ditampilkan caranya dan mengaplikasikannya. Mudah dan tidak ribet kok. Hanya memberikan sedikit kode CSS dalam template maka efek ini akan muncul.
Baca Juga : ASCII Code Emoticon Lucu dan Imut untuk Status Medsos
Bagaimana mulai saja ya.
Teknik Mata Ikan Menyembul dengan CSS3
Masuk ke Dashboard Blogger, kemudian pilih Tema, lalu klik Sesuaikan : Edit HTML. Kemudian cari kode ]]></b:skin>. Tempatkan kode dibawah ini diatas kode ]]></b:skin> ini. Kodenya dibawah ini ya
<style type='text/css'>
.bubblewrap{list-style-type:none; margin:0; padding:0;}
.bubblewrap li{display:inline; width: 45px; height: 40px;}
.bubblewrap li img{width: 35px; height: 40px; border:0; margin-right: 0px; -webkit-transition:-webkit-transform 0.1s ease-in; -o-transition:-o-transform 0.1s ease-in; }
.bubblewrap li img:hover{-moz-transform:scale(1.8); -webkit-transform:scale(1.8);-o-transform:scale(1.8);}
</style>Kemudian untuk menarik kode itu ke dalam tampilan blog maka kita membubuhkan sedikit kode yang akan ditambahkan di dalam postingan. Seperti ini kodenya. Simak ya?
<div class="bubblewrap">
<ul>
<li><a href="URL target 1"/><img src="URL image 1 kalian"/></a></li>
<li><a href="URL target 2"/><img src="URL image 2 kalian"/></a></li>
<li><a href="URL target 3"/><img src="URL image 3 kalian"/></a></li>
</ul>
</div>Catatan Penting : Untuk tulisan yang saya blok pink adalah url gambar kamu ya :
URL image 1 kalian
URL image 2 kalian
URL image 3 kalian
Catatan Juga : Untuk tulisan URL target silakan ganti dengan URL blog yang kalian tuju semisal : https://mozilla.org
Setelah selesai langsung saja di save dan segera lihat. Sudah jadi khan. Memang trik ini sengaja saya tulis disini sebagai artikel yang menarik. Mudah-mudahan kalian mempraktekkannya supaya bisa menambah keren gambar kalian. Sekian artikel Teknik Mata Ikan Menyembul dengan CSS3. Sampai jumpa besok lagi dan Salam.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Teknik Mata Ikan Menyembul dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
