操作方法 - 圖片疊加標題
瞭解如何建立懸停時顯示圖片疊加標題。
圖片疊加標題
將滑鼠懸停在圖片上可檢視疊加效果。
如何建立疊加圖片標題
步驟 1) 新增 HTML
示例
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">我的名字是 John</div>
</div>
步驟 2) 新增 CSS
示例
* {box-sizing: border-box}
/* 容器需要定位疊加層。根據需要調整寬度 */
.container {
position: relative;
width: 50%;
max-width: 300px;
}
/* 使影像響應式 */
.image {
display: block;
width: 100%;
height: auto;
}
/* 疊加效果 - 位於容器和圖片上方 */
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* 黑色半透明 */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/* 當滑鼠懸停在容器上時，淡入疊加標題 */
.container:hover .overlay {
opacity: 1;
}
自己動手試一試 »
提示：另請參閱我們 如何操作 - 影像懸停疊加 中的其他影像疊加效果（淡入、滑動等）。
訪問我們的 CSS 影像教程，瞭解更多關於如何設定影像樣式的資訊。
