Is it possible to use querySelectorAll with offsetHeight?

Question

I would like to know if it's possible to get the height of many element with offsetHeight

<div class="container">
        <div class="card">
            <h4 class="card__title">My Title</h4>
            <div class="card__img">
                <img src="image.jpg" alt="">
            </div>
            <div class="card__description">
                <p>
                   Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                </p>
            </div>
        </div>
        <div class="card">
            <h4 class="card__title">Thailande</h4>
            <div class="card__img">
                <img src="image.jpg" alt="">
            </div>
            <div class="card__description">
                <p>
                    Description 2
                </p>
            </div>
        </div>
    </div>

I would like to to have a translate on the .card__img of the height of .card__description on a 'mouseover', is it possible to get the offsetHeight using querySelectorAll('.card__description).offsetHeight and using a loop? I tried but didin't work.

Answer 1

Thanks guys, I did it!

Here is my solution

const cards = document.querySelectorAll('.card')

function cardAnimation () {
    for (let i = 0; i < cards.length; i++) { 
        let card = cards[i]
        let cardImg = card.querySelector('.card__img')
        let description = card.querySelector('.card__description')
        let descriptionHeight =  description.offsetHeight
        card.addEventListener('mouseover', () => {      
            description.style.transform = `translateY(0)`;
            cardImg.style.transform = `translateY(-${descriptionHeight}px) scale(1.2)`
        })
        card.addEventListener('mouseleave', () => {
            description.style.transform = `translateY(100%)`;
            cardImg.style.transform = `translateY(0px) scale(1)`
        })
    }
}

cardAnimation()