如何 - 圖片疊加縮放
瞭解如何在懸停時建立圖片疊加縮放效果。
圖片懸停全屏縮放
將滑鼠懸停在圖片上，檢視縮放效果。
如何建立疊加縮放效果
步驟 1) 新增 HTML
示例
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
步驟 2) 新增 CSS
示例
/* 容器需要定位疊加層。根據需要調整寬度 */
.container {
position: relative;
width: 50%;
}
/* 使影像響應式 */
.image {
width: 100%;
height: auto;
}
/* 疊加效果 (全高全寬) - 位於容器之上，覆蓋在圖片上 */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
/* 當您將滑鼠懸停在容器上時，疊加文字將“縮放”顯示 */
.container:hover .overlay {
transform: scale(1);
}
/* 疊加層中的一些文字，垂直和水平居中 */
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
自己動手試一試 »
提示：另請參閱我們 如何操作 - 影像懸停疊加 中的其他影像疊加效果（淡入、滑動等）。
訪問我們的 CSS 影像教程，瞭解更多關於如何設定影像樣式的資訊。
