英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp
翻譯 | web前端開發（ID：web_qdkf)
圖像縮放效果，是當鼠標懸停或單擊時對圖像進行縮放的一種應用效果。這種影響主要用於網站上。在我們要在圖像上顯示用戶詳細信息的情況下，這個效果很有用。
有兩種方法可以創建鼠標懸停效果。
使用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>
最終效果輸出如下：
