CSS для нескольких перекрывающихся изображений с тенью

Question

Я пытаюсь сделать так, чтобы 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%;
        }

Answer 1

Вы можете играть со своими 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, поскольку порядок документов будет порядком по умолчанию.

Я позволю вам обработать стили ящиков, это должно получиться вы там, где вам нужно.