多張圖片疊加效果

Question

我有此代碼，可用於單張圖片。 但是，當我想對n張圖片具有相同效果時，我無法弄清楚如何調整代碼以使其正常工作。 有人有什么想法，如何概括這個CSS？ 還是我必須使用其他方法？

.cat-image,
.cat-image img {
    width: 400px;
    height: 400px;    
}

.top {
    position: relative;
    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; 
}

.top .text,
.top button {
    position: absolute;
}

.top .text {
    bottom: 40px;
    left: 30px;
}
.top button {
    bottom: 10px;
    left: 30px;
}

.top:hover {
    opacity: 1;
}

.bottom {
    position: absolute;
    top: 0;
}

Answer 1

您需要將.container的position設置為CSS中的relative position ，以避免多個圖像重疊。

.container {
  position:relative;    
}

如果要讓圖像彼此之間浮動，則只需添加float:left;

.container {
  position:relative; 
  float:left;
}

看看這個小提琴 。 這是你想要的？