Terkadang pula gambar yang di posting pada artikel malah menghalangi tulisan artikel dengan tujuan agar gambar dapat dilihat dengan jelas, namun hal ini justru menyebabkan pengunjung beranggapan bahwa tuslisan sudah selesai.
Memperbesar Gambar ketika mouse pointer di arahkan
Ya, maka dari itu agar tulisan tidak nampak dipenuhi olah gambar sebaiknya memasang gambar tersebut dengan ukuran kecil, namun ketika seseorang ingin melihat gambar tersebut secara detil maka cukup dengan mengarahkan mouse pointer ke gambar tersebut dan gambarpun di perbesar secara lembut, dalam bahasa inggris mungkin pertanyaannya adalah "How to resize image view by smooth zoom on hover".Seperti yang digunakan pada blog ini dimana hanya gambar dalam tulisan sayja yang bisa di perbesar, dan tidak berlaku pada gambar lainnya, silahkan arahkan mouse anda ke gambar yang ada pada tulisan ini, dan coba arahkan mouse ke gambar diluar tulisan ini, dan lihat apa yang terjadi.
Apakah ini menggunakan JAVASCRIPT atau fungsi PHP lainnya? tidak... ini menggunakan CSS
CSS trick Smooth Zoom image on mousehover
Caranya ternyata cukup menambahkan properti transisi serta durasi transisi pada element tersebut melalui CSS, namun trik ini tidak berfungsi pada browser tertentu yang lebih lawas.Berikut ini adalah scriptnya, lengkap dengan html agar tidak membingungkan:
<!DOCTYPE html>
<html>
<head>
<title>Your page title</title>
<style>
#header {}
#content img {width: 300px; transition-property: width; transition-duration: 0.5s;}
#content img:hover {width: 100%}
#footer {}
</style>
<body>
<div id="header">YOUR HEADER CONTENT</div>
<div id="content">
<p>Article Content with image</p>
<img src="sample.jpg" />
<p>Article Content with image</p>
</div>
<div id="footer">Your Footer Content</div>
</body>
</head>
CSS script diatas berfungsi untuk memperbesar gambar yang ada pada elemen content, sementara tidak berfungsi pada gambar di elemen lainnya
Artikel ini mungkin akan ditemukan dengan Keywords : Smooth Zoom Image jquery, memperbesar gambar ketika mouse diarahkan, memperbesar gambar dengan lembut, mooth zoom image on hover CSS, mooth zoom image on hover jquery, mooth zoom image on hover javascript, mooth zoom image on hover css3
Labels: css, html, javascript, PHP, Webmaster