在網頁設計中，常常需要使用鼠標滑過圖片的效果，比如當鼠標移動到圖片上時，會顯示出圖片的描述文字。這種效果可以使用CSS來實現。

img {
position: relative;
}
img:hover:after {
content: attr(alt);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 1.5em;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

以上代碼中，我們首先將圖片的position屬性設為relative，這樣才能讓我們后續的文字層相對于圖片進行定位。然后，我們使用:hover偽類為圖片添加了一個:after偽元素。在這個元素中，我們使用content屬性來獲取圖片的alt屬性值，從而達到顯示描述文字的效果。

接下來，我們使用position:absolute屬性將文字層定位到圖片的上方。使用top:0、left:0、right:0、bottom:0屬性將文字層尺寸設為與圖片大小相同。使用background-color屬性設置文字層的背景色，使用color屬性設置文字顏色。使用font-size屬性設置文字大小，使用text-align屬性設置居中對齊。

最后，我們使用display屬性、justify-content屬性和align-items屬性將文字層以居中的方式顯示在圖片中央。