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