Как сделать, чтобы при наведении на блок применялась анимация и на блок и на содержимое в нем?

Question

[Дмитрий Руденко]

Как сделать, чтобы при наведении на блок происходила анимация самого блока и его содержимого?
Пока что только получилось сделать так, что при наведении на блок (серый фон) увеличивается фон, а если навести на само украшение, то происходит анимация и на блоке, и на украшении

Код вот такой:

products_bg = document.querySelectorAll("#product-bg");
products = document.querySelectorAll("#product");

products_bg.forEach( (product1) =>
{
    products.forEach ( (product) =>
    {        
            product1.onmouseenter = () => 
            {
                
                product1.style.height ="257px";
                product1.style.transitionDuration ="0.5s"
                product1.style.marginBottom = "27px";
                
              
            }
        
            product1.onmouseleave = () =>
            {
               
                product1.style.height ="184px";
                product1.style.transitionDuration ="0.5s"
                product1.style.marginBottom = "68px"; 
              
            }
            product.onmouseenter = () => 
            {
                product.style.transitionDuration ="0.5s"
                product.style.transform = "scale(1.2)"
              
            }
        
            product.onmouseleave = () =>
            {
               
                product.style.transitionDuration ="0.7s"
                product.style.transform = "scale(1)"
              
            }
        
        
    })
})