hover on an element with effect

Question

I created an effect on a list of images so that it enlarges when the mouse passes but when I go to this list the whole list performs the effect and not the selected image. The current code performs the effect on all images instead of just one. However, I select the element correctly

#homebrands {
    .brands {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .brand{
            position: relative;
            padding: 0 1rem 0 1rem;
            .figure {
                transition: transform 0.4s;
            }
        }
    }
    &:hover, &:focus {
        .brands{
            .brand{
                .figure{
                    transform: scale(1.2) rotate(0.01deg);
                }
            }
        }
    }
}

Answer 1

Based on your code, it looks like you're trying to add a transition to only objects in the .figure class. Right now, everything under #homebrands is affecting what happens to #homebrands. To fix this, remove the hovering from #homebrands to not affect it. Without your HTML, I can't tell what you want to change when hovered on, but this is what your code should look like assuming you want each .brand to enlarge when hovered.

#homebrands {
    .brands {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .brand{
            position: relative;
            padding: 0 1rem 0 1rem;
            .figure {
                transition: transform 0.4s;
            }
        }
    }
}

/* This is moved: */
.brand { 
    &:hover, &:focus { 
        .figure { 
            transform: scale(1.4) rotate(0.01deg); 
        } 
    } 
}