CSS實現圖片懸停效果

在網頁設計中，圖片懸停效果是一種很常見的交互效果，可以提高用戶體驗。下面將介紹幾種CSS實現圖片懸停效果的方法：

1.放大效果

當鼠標懸停在圖片上時，圖片會放大一點，以突顯出來。可以通過CSS3的transform屬性實現：

img:hover {
transform: scale(1.1);
}

2.淡入淡出效果

當鼠標懸停在圖片上時，圖片會以漸進的方式顯示出來，可以增加圖片的吸引力。可以通過CSS3的opacity屬性實現：

img:hover {
opacity: 0.8;
transition: opacity 0.5s ease-in-out;
}

3.覆蓋效果

當鼠標懸停在圖片上時，會出現一層覆蓋的效果，可以在此時顯示圖片標題或其他信息。可以通過絕對定位和偽元素實現：

.container {
position: relative;
}
.container img:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

總結

這些是CSS實現圖片懸停效果的幾種方法，根據需求選擇適合的效果即可。同時也要注意兼容性，某些老版本的瀏覽器可能無法支持這些CSS3效果。