Use mouseover for a list of products

I have multiple product cards within a division. I want to display the relevant information when the mouse is moved on each card, and not to display the information whenever the mouse is out.

<div class="row holderCard d-flex">
<div class="col-md-4 col-sm-12 card">
            <div class="holderDetailsImg">
                <div>
                    <div class="coverGradient d-none"></div>
                    <img src="img/zahedan.jpg" alt="Avatar">
                </div>
                <div class="infoImg d-none">
                    <span class="badgesLike"><i class="fa fa-heart-o"></i></span>
                    <p class="titleDetailesImg">یک متن آزمایشی داخل ان است</p>
                    <p class="descriptionDetailesImg">یک متن آزمایشی داخل آن وجود دارد که با هم هست</p>
                    <span class="badgesTags">مسجد مکی زاهدان</span>
                    <div class="badgesStar">
                        <span class="fa fa-star checked "></span>
                        <span class="fa fa-star checked "></span>
                        <span class="fa fa-star checked "></span>
                        <span class="fa fa-star "></span>
                        <span class="fa fa-star "></span>
                    </div>
                </div>
            </div>
            <div class="container">
                <span class="badges">2</span>
                <p class="captionCard small">مجموعه ای از بهترین مکان های گردردشگری</p>
            </div>
        </div>
        <div class="col-md-4 col-sm-12 card">
            <div class="holderDetailsImg">
                <div>
                    <div class="coverGradient d-none"></div>
                    <img src="img/yazd.jpg" alt="Avatar">
                </div>
                <div class="infoImg d-none">
                    <span class="badgesLike"><i class="fa fa-heart-o"></i></span>
                    <p class="titleDetailesImg">یک متن آزمایشی داخل ان است</p>
                    <p class="descriptionDetailesImg">یک متن آزمایشی داخل آن وجود دارد که با هم هست</p>
                    <span class="badgesTags">بادگیرهای یزد</span>
                    <div class="badgesStar">
                        <span class="fa fa-star checked "></span>
                        <span class="fa fa-star checked "></span>
                        <span class="fa fa-star checked "></span>
                        <span class="fa fa-star "></span>
                        <span class="fa fa-star "></span>
                    </div>
                </div>
            </div>
            <div class="container">
                <span class="badges">2</span>
                <p class="captionCard small">مجموعه ای از بهترین مکان های گردردشگری</p>
            </div>
        </div>
</div>

I have written the mouseover part using the forEach and a condition to have the d-none class. My problem is that when the mouse is placed on any of the cards, only d-none of the first card is removed.

I can’t understand where the problem is.
Because when there is an alert inside the function, all the information cards are shown with float. But the d-none class is not removed

let holderDetailsImg= document.querySelectorAll('.holderDetailsImg')
let coverGradient= document.querySelector('.coverGradient')
let infoImg= document.querySelector('.infoImg')


holderDetailsImg.forEach(function (holderDetailsImg){
    holderDetailsImg.addEventListener("mouseover", mouseOver);
    function mouseOver() {
        if(coverGradient.classList.contains('d-none') || infoImg.classList.contains('d-none')){
            coverGradient.classList.remove('d-none');
            infoImg.classList.remove('d-none');

        }
    }
})

and not css codes. i only add d-none on tags