CSS作為前端開發(fā)的必備技能之一，可以讓我們實(shí)現(xiàn)許多炫酷的效果。今天，我們來介紹一種使用CSS來實(shí)現(xiàn)圖片上移的方法。

.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
position: absolute;
bottom: -100%;
transition: bottom 0.5s ease-in-out;
}
.img-container:hover img {
bottom: 0;
}

首先，在html中定義一個類名為“img-container”的元素，將它的定位方式設(shè)置為“relative”，并定義一個“overflow: hidden”屬性，以隱藏圖片下方超過容器大小的部分。

接下來，定義img標(biāo)簽的樣式，將其定位方式設(shè)置為“absolute”，并將其初始bottom屬性設(shè)置為“-100%”（即移出容器范圍之外）。我們還給img標(biāo)簽添加了一個過渡效果，當(dāng)bottom屬性改變時，該效果將以“ease-in-out”的方式運(yùn)行，持續(xù)時間為0.5秒。

最后，在hover時，將img標(biāo)簽的bottom屬性設(shè)置為0，使其向上滑動到容器內(nèi)。

通過以上這些CSS代碼，我們就成功實(shí)現(xiàn)了圖片上移的效果。