Let's make this life Easy, as well as you can
Mengulas berbagai cerita kehidupan mulai dari tradisi hingga teknologi, tips, solusi, informasi, internet, pekerjaan, hiburan, Kesehatan, mitos, fakta, klenik, unik bahkan mistik yang diulas berdasarkan pengalaman serta dari berbagai referensi, semoga bermanfaat
Pada saat membuat desain tampilan website atau blog, salah satu faktor SEO Friendly adalah dengan menimalisir kemunculan gambar, seperti yang sering disebutkan oleh google pagespeed yang selalu mengatakan bahwa kontent tulisan harus lebih besar daripada konten gambar.

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

CSS Cara membuat Smooth Zoom pada gambarYa, 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

Label: , , , ,



| Cari Cara membuat Smooth Zoom pada gambar di : AOL | Ask | Bing | DuckDuckGo | Microsoft | Google | ixquick | Yahoo | Yandex | Yippy | MySearch