상자 그림자가 있는 여러 겹치는 이미지에 대한 CSS (CSS for multiple overlapping images with box shadow)

문제 설명

상자 그림자가 있는 여러 겹치는 이미지에 대한 CSS (CSS for multiple overlapping images with box shadow)

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%;
        }

참조 솔루션

방법 1:

You can play with your margin values. auto on either or both sides (and you can add a percentage on the opposite side to avoid "perfect" positions), and negative margin‑top for .image + .image to pull them upwards and overlap.

.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>

I changed the width value to make this work with your example.

You'll notice I've used :nth‑child to target each box individually, you could of course use something else. Also note the use of z‑index to make sure each box is above the following one. If you want boxes to be layered above the previous one, you can remove the z‑index as the document order will be the default order.

I'll let you handle the styling of the boxes, this should get you where you need.

(by condo1234、chriskirknielsen)

참조 문서

1. CSS for multiple overlapping images with box shadow (CC BY‑SA 2.5/3.0/4.0)