*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}

.blue{
    background-color: navy;
}
.red
{
    background-color: red;
    /* anchor-name: --some-anchor; */
}
.green{
    background-color: green;
}
.box{
    width: 200px;
    transition: all 0.3s linear;
    height: 200px;
}
.box:hover{
    anchor-name: --some-anchor;
}
body{
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    anchor-name: --some-anchor;
    /* gap: 20px; */
}
.anchor{
    background-color: rgba(60, 0, 255, 0.41);
    border-radius: 10px;
    position: absolute;
    position-anchor: --some-anchor;
    top: anchor(top);
    left: anchor(left);
    bottom: anchor(bottom);
    right: anchor(right);
    pointer-events: none; 
    
    transition: all 0.3s linear;
}

.f11{
    background-color: tomato;
}
.f21{
    background-color: teal;
}
.f31{
    background-color: sienna;
}
body:has(.box:hover).box{
    transform: scale(0.8);
    opacity: 0.8;
}
body .box:hover{
    transform: scale(1.2);
    opacity: 1;
}