Как сделать так что бы фото перекрывало блок(обводку) , но при этом блок вылазит за границы

Question

.photo-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 120px;
}
.photo-services__item {
    margin-bottom: 80px;
    max-width: 400px;
}

.services-item__blok {
width: 396px;
height: 300px;
/* left: 332px;
top: 1638px; */
box-sizing: border-box;
border: 1px solid rgb(27, 177, 105);
opacity: 0.5;
}



.services-item__img {
    max-width: 400px;
    max-height: 400px;
}
.services-item__text {
    font-size: 30px;
    line-height: 120%;
    margin-top: 35px;
}

 <div class="photo-services">
            <div class="photo-services__item">
                <img src="./assest/img/unsplash_TnyHlxVnyhk.png" alt=""  class="services-item__img">
                <div class="services-item__blok"></div>
                <p class="services-item__text">Парикмахерские услуги</p>
            </div>
            <div class="photo-services__item">
                <img src="./assest/img/unsplash_gb6gtiTZKB8.png" alt="" class="services-item__img">
            <div class="services-item__blok"></div>                    
            <p class="services-item__text">Маникюр</p>
            </div>
            <div class="photo-services__item">
                <img src="./assest/img/unsplash_qeuJczNo54w.png" alt="" class="services-item__img">
                <div class="services-item__blok"></div>
                <p class="services-item__text">Педикюр</p>
            </div>
            <div class="photo-services__item">
                <img src="./assest/img/unsplash_Pe9IXUuC6QU.png" alt="" class="services-item__img">
                <div class="services-item__blok"></div>
                <p class="services-item__text">Косметология</p>
            </div>
            <div class="photo-services__item">
                <img src="./assest/img/unsplash_VxAwTeiqDao.png" alt="" class="services-item__img">
                <div class="services-item__blok"></div>
                <p class="services-item__text">Эстетист по телу</p>
            </div>
            <div class="photo-services__item">
                <img src="./assest/img/unsplash_FoeIOgztCXo.png" alt="" class="services-item__img">
                <div class="services-item__blok"></div>
                <p class="services-item__text">Визаж</p>
            </div>
        </div>

Answer 1

        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
            gap: 75px;
            justify-content: center;
        }

        .card {

            position: relative;
            border: 1px red solid;
            height: 416px;
            width: 386px;
        }

        .card-img {
            position: absolute;

            width: 100%;
            height: 100%;
            left: -20px;
            top: 20px;
        }

        .card-description {
            position: absolute;
            font-size: 30px;
            line-height: 120%;
            z-index: 100;
            bottom: -55px;

        }

  <div class="wrapper">

        <div class="card">
            <img class="card-img"
                src="https://www.gravatar.com/avatar/19398b7185ebaa314423ef9a7e4dce6d?s=256&d=identicon&r=PG&f=y&so-version=2"
                alt="">
            <p class="card-description"> text</p>
        </div>
        <div class="card">
            <img class="card-img"
                src="https://www.gravatar.com/avatar/19398b7185ebaa314423ef9a7e4dce6d?s=256&d=identicon&r=PG&f=y&so-version=2"
                alt="">
            <p class="card-description"> text</p>
        </div>
        <div class="card">
            <img class="card-img"
                src="https://www.gravatar.com/avatar/19398b7185ebaa314423ef9a7e4dce6d?s=256&d=identicon&r=PG&f=y&so-version=2"
                alt="">
            <p class="card-description"> text</p>
        </div>
        <div class="card">
            <img class="card-img"
                src="https://www.gravatar.com/avatar/19398b7185ebaa314423ef9a7e4dce6d?s=256&d=identicon&r=PG&f=y&so-version=2"
                alt="">
            <p class="card-description"> text</p>
        </div>
        <div class="card">
            <img class="card-img"
                src="https://www.gravatar.com/avatar/19398b7185ebaa314423ef9a7e4dce6d?s=256&d=identicon&r=PG&f=y&so-version=2"
                alt="">
            <p class="card-description"> text</p>
        </div>
        <div class="card">
            <img class="card-img"
                src="https://www.gravatar.com/avatar/19398b7185ebaa314423ef9a7e4dce6d?s=256&d=identicon&r=PG&f=y&so-version=2"
                alt="">
            <p class="card-description"> text</p>
        </div>
 

    </div>

БЛОГ НА HUSL

Как сделать так что бы фото перекрывало блок(обводку) , но при этом блок вылазит за границы

Ответы (1 шт):