在網頁設計中，圖片輪播通常用于展示多張圖片，以吸引用戶的注意力和提升整體頁面的美觀度。使用CSS實現圖片上下輪播可以在不使用JavaScript等腳本的情況下實現該效果。

首先，在HTML文件中添加一個包含多張圖片的容器，并為其設置高度和寬度：

<div class="slider">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
</div>

接下來，在CSS文件中添加以下代碼來設置圖片輪播的效果：

.slider {
position: relative;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.slider img:first-child {
opacity: 1;
}
.slider img.active {
opacity: 1;
}
.slider img.last-active {
opacity: 0;
}
.slider:hover img {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.slider:hover img.active {
opacity: 0.5;
}
.slider:hover img.last-active {
opacity: 1;
}

通過將圖片容器的position屬性設置為relative，可以使其成為絕對定位的父容器。而將overflow屬性設置為hidden可以避免多余的圖片顯示在容器外面。為了實現圖片輪播的效果，我們需要在控制每張圖片的顯隱狀態。我們可以設置所有的圖片，包括第一個圖片的opacity屬性為0(不可見)。并為第一個圖片重置opacity屬性為1，使其呈現可見狀態。同時，通過CSS的transition屬性來實現過渡效果。

最后，我們將鼠標懸停在圖片容器上時的效果設置為：所有當前顯示的圖片的opacity屬性降低為0.5，同時下一個將顯示的圖片的opacity屬性變為1。

通過以上CSS代碼，我們就實現了一個基于CSS的圖片上下輪播效果。