.artContainer {
    font-family: $Adella;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transition: ease all 1s;
    position: relative;
    width: 421px;
    height: 175px;
    .articleBG {
        z-index: 01;
        position: absolute;
        background-image: url("../images/len.jpg");
        width: 100%;
        height: 100%;
        &:after {
            position: absolute;
            content: "";
            opacity: .5;
            background-image: $gradviolet;
            width: 100%;
            height: 100%;
        }
    }
    &:hover {
            .articleBG:after {
                opacity: .8;
            }
    }
    .content {
        position: absolute;
        color: aqua;
        z-index: 1000;
        color: $pallete4;
        padding: 10px;
        h5 {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        p {
            display: flex;
            justify-content: space-between;
        }
    }
}




                <article class="artContainer">
                    <div class="articleBG">
                    </div>
                    <div class="content">
                        <h5>Lenovo news</h5>
                        <p><a class="author">By Ed Shawn</a><a class="count">180</a></p>
                    </div>
                </article>