Bir kart yapmaya çalışıyorum ve bu kartta hover ve transition kullanacağım.

İkonların olduğu bölümde overflow:hidden kullanıyorum fakat taşma gizlenmiyor. En soldaki ikon köşede olacak ve hover olduğunda turuncu alan sola kayacak fakat taşma işlemini gizleyemiyorum.

<div class="col-5 icons d-flex">
                      <div class="left-icon">
                          <i class="fa-solid fa-angle-left"></i>
                          <a href="#"><i class="fa-brands fa-facebook"></i></a>
                          <a href="#"><i class="fa-brands fa-twitter"></i></a>
                          <a href="#"><i class="fa-brands fa-linkedin"></i></a>
                      </div>
                    </div>

.team .rowTwo .icons{
    padding: 0;
    gap: 10px;
    justify-content: space-evenly;
    position: relative;
    height: 45px;
}
.team .rowTwo .col-5 .left-icon{
    position: absolute;
    bottom: 0;
    right: -100px;
    overflow: hidden;
    display: flex;
    background: var(--main-color);
    color: var(--white);
    border-radius: 30px;
    transition: 0.35s ease all;
}
.team .rowTwo .left-icon:hover{
        right: 0;
}

Kodlar da bu şekilde. Bir türlü çözemedim maalesef