CSS懸停放大效果是許多網頁設計師常用的技巧之一。本文將向您介紹如何使用CSS制作一個簡單的懸停放大效果。 首先，我們需要在HTML中添加一個要應用效果的元素。在這個案例中，我們選擇一個圖片。我們的HTML代碼如下所示：

<div class="image-container">
<img src="image.jpg" alt="example image">
</div>

我們將選擇一個包含圖像的div元素，并在其內部放置一個img元素。我們還添加了一個class="image-container"作為CSS樣式選擇器。 接下來，我們將使用CSS以懸停效果展示圖片。我們可以創建一個:hover偽類，并使用transition屬性來實現平滑的過渡效果。我們還可以對圖像應用transform屬性，用于更改圖像大小和位置。最終，樣式代碼將如下所示：

.image-container img {
width: 100%;
height: auto;
}
.image-container:hover img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}

在這個CSS代碼塊中，我們首先將圖像大小設置為100％，并使用:hover偽類和transform屬性來放大圖像。我們還為所有瀏覽器指定了相應的CSS前綴，以確保最大的兼容性。最后，我們使用transition屬性實現過渡效果，讓懸停但效果變得平滑。 最后，我們將上述HTML和CSS代碼放在一個文件中，并將文件命名為“index.html”和“style.css”。我們可以在任何現代瀏覽器中打開此文件，即可看到我們所創建的超棒的懸停放大效果！