时间戳

首页 > 解决方案 > 带有框阴影的多个重叠图像的CSS

css - 带有框阴影的多个重叠图像的CSS

问题描述

我试图让 3 张图像重叠，看起来与下图完全一样。我似乎无法复制带有框阴影的样式，我的图像只是出现在一条线上。

在此处输入图像描述

HTML

<div class="container">
            <div class="image">
                <a href=""><img src="https://picsum.photos/280/280/"/></a>
                <div class="overlay"><img src="https://picsum.photos/280/280/?random"/></div>
            </div>
            <div class="image">
                <a href=""><img src="https://picsum.photos/280/280/"/></a>
                <div class="overlay"><img src="https://picsum.photos/280/280/?random"/></div>
            </div>
            <div class="image">
                <a href=""><img src="https://picsum.photos/280/280/"/></a>
                <div class="overlay"><img src="https://picsum.photos/280/280/?random"/></div>
            </div>
        </div>

CSS

    .container {
            max-width: 940px;
            font-size: 0;
        }
        .image {
            display: inline-block;
            position: relative;
            margin: 1%;
            width: 31.3%;
        }
         .image img { 
            height: auto;
            width: 100%; 
        }
        .overlay {
            position: absolute;
            width: 100%;
            bottom: 0;
            opacity: 0;
            transition: all 0.5s ease;
        }
        .overlay:hover {
            opacity: 1;
        }
        .overlay img{
            height: auto;
            width: 100%;
        }

标签： csssasscss-selectors

解决方案

你可以发挥你的margin价值观。auto在任一侧或两侧（您可以在另一侧添加一个百分比以避免“完美”位置），负数margin-top将.image + .image它们向上拉并重叠。

.container {
            max-width: 940px;
            font-size: 0;
        }
        .image {
            display: block;
            position: relative;
            width: 62.6%;
        }
        .image:nth-child(1) {
          margin-right: auto;
          z-index: 3;
        }
        .image:nth-child(2) {
          margin-left: auto;
          z-index: 2;
        }
        .image:nth-child(3) {
          margin-left: auto;
          margin-right: auto;
          z-index: 1;
        }
        .image + .image {
          margin-top: -15.65%;
        }
        .image img { 
            height: auto;
            width: 100%; 
        }
        .overlay {
            position: absolute;
            width: 100%;
            bottom: 0;
            opacity: 0;
            transition: all 0.5s ease;
        }
        .overlay:hover {
            opacity: 1;
        }
        .overlay img{
            height: auto;
            width: 100%;
        }
<div class="container">
            <div class="image">
                <a href=""><img src="https://picsum.photos/280/280/"/></a>
                <div class="overlay"><img src="https://picsum.photos/280/280/?random"/></div>
            </div>
            <div class="image">
                <a href=""><img src="https://picsum.photos/280/280/"/></a>
                <div class="overlay"><img src="https://picsum.photos/280/280/?random"/></div>
            </div>
            <div class="image">
                <a href=""><img src="https://picsum.photos/280/280/"/></a>
                <div class="overlay"><img src="https://picsum.photos/280/280/?random"/></div>
            </div>
        </div>

我更改了width值以使其适用于您的示例。

你会注意到我曾经:nth-child单独定位每个盒子，你当然可以使用其他东西。还要注意使用，z-index以确保每个框都高于以下一个。如果您希望框在前一个之上分层，您可以删除z-index文档顺序将是默认顺序。

我会让你处理盒子的样式，这应该能让你到达你需要的地方。

推荐阅读