CSS滑動(dòng)圖片放大效果可以給網(wǎng)站增添美觀和動(dòng)態(tài)效果，能夠吸引用戶的注意力。下面我們將介紹如何利用CSS實(shí)現(xiàn)這一效果。

<div class="container">
<img src="image.jpg" alt="Image">
<div class="overlay"></div>
</div>
<style>
.container {
position: relative;
width: 300px; /* 修改這個(gè)數(shù)值以適應(yīng)不同的圖片大小 */
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5); /* 修改此處數(shù)值可以更改遮罩層的透明度 */
transition: opacity 0.3s; /* 用于實(shí)現(xiàn)遮罩層漸變顯示和隱藏效果 */
}
.container:hover .overlay {
opacity: 1;
}
.container img {
width: 100%;
height: auto;
transition: transform 0.3s; /* 用于實(shí)現(xiàn)圖片放大效果 */
}
.container:hover img {
transform: scale(1.2);
}
</style>

以上的代碼實(shí)現(xiàn)了一個(gè)基本的滑動(dòng)圖片放大效果。其中，容器(.container)為一個(gè)相對(duì)定位元素，內(nèi)部包含了圖片(img)和遮罩層(.overlay)。通過:hover偽類來(lái)控制元素狀態(tài)的變化，實(shí)現(xiàn)遮罩層隨著鼠標(biāo)移入而漸變顯示，圖片隨著鼠標(biāo)移入而放大的效果。