Angular: CSS encapsulation bug- grid component :hover styling is applied to sibling grid components

Question

I am having problems spotting the bug in my code, would appreciate any help. I have a grid container component with child grid item components generated by *ngFor. The child components take two inputs:

1. An object called rfpDoc
2. featured: Boolean (I'm styling the featured item with larger text).

The css hover animation works for all child components (zooms image with overflow set to hidden), except for the first child component (Also happens to be the featured item). When I hover over that component every child component zooms and overflows the grid container. Any idea why this is the case?

Click for Stack Blitz URL Note that the biggest grid item on hover expands the grid and pushes some how zooms sibling components. Other individual grid item components do not have the same behavior when they are hovered over.

Click for Stack Blitz Editor

Answer 1

Replace

        &:hover{
           width: 105%;
           height: 105%;
           cursor: pointer;
        }

with

        &:hover{
           transform: scale(1.05);
           cursor: pointer;
        }