css - 图像叠加层不适合

Question

我有图像叠加的问题。

代码在这里：https ://codepen.io/r-smal/pen/BOBdmX

<section class="team">
    <h2 class="team__title">team</h2>
    <div class="team__wrapper container__team  ">
        <div>
            <div class="team__card ">
                <div class="team__overlay"></div>
                <img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
            </div>
            <h3 class="team__description">lorem</h3>
            <p class="team__span">ipsum</p>
        </div>
        <div>
            <div class="team__card ">
                <div class="team__overlay"></div>
                <img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
            </div>
            <h3 class="team__description">lorem</h3>
            <p class="team__span">ipsum</p>
        </div>
        <div>
            <div class="team__card ">
                <div class="team__overlay"></div>
                <img class="team__img" src="https://i.imgur.com/vWIuUtd.jpg" alt="mako">
            </div>
            <h3 class="team__description">lorem</h3>
            <p class="team__span">ipsum</p>
        </div>
</section>


.container__team { 
    max-width: 1700px;
    margin: 0 auto;
}

.team {
    &__title {
        margin: 100px;
        text-align: center;
        font-size: 30px;
        text-transform: uppercase;
        position: relative;
        &::after{
            content: "";
            position: absolute;
            width: 85px;
            border-bottom: solid 3px #5dc6e8;
            left: 48.5%;
            top: 50px;      
        }
    }
    &__wrapper {
        display: grid;
        grid-template-columns: 33.33% auto auto;
        text-align: center

    }
    &__description {
        margin: 50px 0 20px;
        text-align: center;
        font-size: 35px;
    }
    &__span{
        font-size: 35px;
        text-align: center;
    }
    &__card {
        position: relative;
    }
    &__overlay {
        position: absolute;
        background: rgba(0,0,0,0.6);
        width: 100%;
        height: 100%;
        display: none;   
    }
  &__img{

  }



}
.team__card:hover .team__overlay{
    display: block;
    transition: 0.3s;
}

正如您在图像顶部的 codepen 叠加层上看到的那样，它比我的图像大，我不知道为什么。我让它“适合”，但我必须使用静态边距，因此在移动版本中它看起来不正确。

最后一个问题我如何定位 ::after 元素中心在我的文本下，即使在移动设备中也会保留在这里？不使用我的代码中的静态边距。

标签： css