圖像縮放效果，是當鼠標懸停或單擊時對圖像進行縮放的一種應用效果。這種影響主要用於網站上。在我們要在圖像上顯示用戶詳細信息的情況下，這個效果很有用。
有兩種方法可以創建鼠標懸停效果。
-
使用JavaScript
-
使用CSS
在本文中，我們將看到如何使用CSS來實現這種效果。本文包含兩部分代碼。第一部分包含HTML代碼，第二部分包含CSS代碼。HTML代碼：在本文中，我們將使用HTML創建懸停效果時圖像縮放的基本結構。
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> How to Zoom an Image on Mouse Hover using CSS? </title> </head> <body> <div class="geeks"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" /> </div> </body> </html>
CSS代碼：在本節中，我們將使用一些CSS屬性在鼠標懸停時縮放圖像。要創建縮放效果，我們將使用transition和transform這兩個屬性。
<style> .geeks { width: 300px; height: 300px; overflow: hidden; margin: 0 auto; } .geeks img { width: 100%; transition: 0.5s all ease-in-out; } .geeks:hover img { transform: scale(1.5); } </style>
完整代碼：在本文中，我們將結合以上兩個部分，使用HTML和CSS在鼠標懸停時創建圖像縮放效果。例：
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title> How to Zoom an Image on Mouse Hover using CSS? </title> <style> .geeks { width: 300px; height: 300px; overflow: hidden; margin: 0 auto; } .geeks img { width: 100%; transition: 0.5s all ease-in-out; } .geeks:hover img { transform: scale(1.5); }</style></head><body> <div class="geeks"> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" /> </div></body></html>