<!-------- НУЖНЫЕ -------------------------------------------------------------------->

<style>
needed {
    display: block;
    position: absolute;
    width: 193px;
    height: 61px;
    box-shadow: var(--box-shadow-header);
    margin: 270px 0 0 115px !important;
    backdrop-filter: blur(3px);
    border-radius: 8px;
    border: 1px solid rgba(var(--gray-main), 1);
    background: url(https://forumstatic.ru/files/001c/72/80/40123.svg) center no-repeat, rgba(var(--accent-secondary), .79);
}

needed::before {
    content: attr(data-title);
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    padding: 7px 0;
    text-align: center;
    font: var(--fw800) var(--fs12) var(--font-reserve);
    color: rgb(var(--canvas-primary));
}

needed div {
    position: absolute;
    top: 42px;
    left: -8px;
    display: flex;
    gap: 16px;
}

needed div a {
background: rgb(var(--canvas-tertiary));
width:58px;
height:58px;
display:flex;
padding:0!important;
    justify-content: center;
    align-items: center;
    border-radius:var(--bradius-minor);
    border: var(--border-1px);
}

needed div a::before {
content:'';
position:absolute;
width:50px;
height:50px;
box-shadow: inset 0px 0px 0px 30px rgba(var(--gray-second), .5);
border-radius:var(--bradius-minor);
z-index: 3;
transition: box-shadow var(--anim-hover);
}

needed div a:hover::before {
box-shadow: inset 0px 0px 0px 0px rgba(var(--gray-second), .5);
}

needed div a img {
width:50px;
height:50px;
object-fit:cover;
border-radius:var(--bradius-minor);
filter: grayscale(1);
transition: filter var(--anim-hover);
}

needed div a:hover img {
filter: grayscale(0);
}

</style>

<needed data-title='Нужные персонажи'><div>

<a href='#' title='Кто и зачем ищется'><img src='https://i.imgur.com/SLqWkpK.png' /></a>
<a href='#' title='Кто и зачем ищется'><img src='https://i.imgur.com/SLqWkpK.png' /></a>
<a href='#' title='Кто и зачем ищется'><img src='https://i.pinimg.com/736x/96/e2/99/96e2999b49684e07e98742100d2508eb.jpg' /></a>

</div></needed>