Question

我有this代码，适用于单张图片。然而，当我想对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

您需要在CSS中将position的{{1}}设置为.container，以避免多个图片重叠。

relative

如果你想让你的图像漂浮在另一个旁边，你所要做的就是添加.container { position:relative; }

float:left;

Look at this fiddle。这是你在找什么？

多张图片的叠加效果

1 个答案: