Penulis: Moch Adnan dipublikasikan: 25 November 2014
Dalam sebuah artikel mungkin saja gambar hanya menjadi sebuah pelengkap kesempurnaan dari sebuah artikel, namun tidak menutup kemungkinan bahwa keberadaan gambar juga bagi sebagian dianggap penting guna untuk mendukung keakuratan data yang dimuat dalam sebuah artikel tersebut. 

Terlepas dari itu semua saya tidak akan mempersoalkan mengenai hal tersebut diatas, karena bagaimana pun tujuan dari artikel yang saya publish ini hanya untuk memberikan trik atau sebuah tutorial mengenai mempercantik tampilan sebuah gambar dan tentang bagaimana caranya membuat sebuah efek bayangan pada tampilan gambar.

Sebelumnya saya pernah juga memposting tentang cara membuat gambar yang bisa berubah tampilan ketika terkena kursor atau tersorot kursor. Dan untuk lebih jelasnya silahkan buka link berikut jika anda ingin membacanya juga:. Cara membuat gambar berubah tampilan ketika terkena kursor.

Tidak jauh berbeda dengan trik diatas, maka sebenarnya trik kali ini pun hanya memanfaatkan 2 buah gambar yang harus anda sisipkan dalam sebuah kode. Yang membedakannya mungkin karena pada trik kali ini kodenya menggunakan HTML dipadukam dengan sentuhan gaya. Hingga efek bayangan gambar yang terlihat akan begitu nampak seperti pantulan dalam sebuah cermin. Sebagai preview perhatikan gambar berikut ini:



Nha, untuk membuat tampilan gambar seperti diatas tersebut, caranya anda hanya cukup mengcopy kode berikut ini. Jika anda akan mempublikasikannya dalam sebuah postingan maka anda diharuskan merubah tab mode penulisan artikel dari 'Tampilan menulis' menjadi 'HTML' 

<div style="position: relative;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZp7kmqClYLysw_O4uFbcvldGjuFYpyDfyYnFWkZzEk1zvVzROpO7z7-BrcgArpGgkER-tvaTV3ulgC26sz04NF0gTG588Xe43REFBinrCbd2TFHv7pcAf2mHJIXUGjjP7ZJ6vN5bf7Kx3/s1600/forsale+inazuma+250cc.png" /></div>

<div style="-khtml-opacity: 0.2; -moz-opacity: 0.20; filter: alpha(opacity=20); margin-top: -10px; opacity: 0.2; position: relative;">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCx5SjO0hT1OiynT2mHvCp_x8QKJAjA0p9lOlE32FnBPcqUvytc2yXhob5hAnq777ZE8UICgmk_V3sp7iwlGMjt1tSl1le06hPmbkQZQ7_GQGhMXsAJoM9bZwsMkawyX1yuy1rkleaVQGx/s1600/forsale+inazuma+250cc.png" /></div>


Bagaimana? Sejauh ini anda hanya perlu mengganti masing-mamsing url gambar dalam kode diatas, yang sengaja saya warnai dengan warna merah. Silahkan ganti ke 2 url gambar tersebut dan kemudian publikasikan gambar anda.
  Semogga bermanfaat  ✌