Это круговой эффект, который я пытаюсь воспроизвести.При наведении на изображение серого круга и анимированной вращающейся красной сетки.
Я пытаюсь использовать border-radius, но это не сработало.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
}
.bg-Ant_Man {
width: 111px;
height: 111px;
border-radius: 100%;
background-color: black;
background-position: 0px -555px;
}
.bg-Black_Panther {
width: 73px;
height: 111px;
background-position: 0px -777px;
}
.bg-Black_Widow {
width: 73px;
height: 111px;
background-position: 0px -888px;
}
.bg-Bullseye {
width: 73px;
height: 111px;
background-position: 0px -999px;
}
.bg-Cable {
width: 73px;
height: 111px;
background-position: 0px -1110px;
}
.bg-Captain_America {
width: 73px;
height: 111px;
background-position: 0px -1221px;
}
.bg-Captain_Marvel {
width: 73px;
height: 111px;
background-position: 0px -1332px;
}
.bg-Carnage {
width: 73px;
height: 111px;
background-position: 0px -1443px;
}
<div class="container">
<div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
<div>
<i class="sprite bg-Black_Panther"></i>
<b>Black Panther</b>
</div>
<div>
<i class="sprite bg-Black_Widow"></i>
<b>Black Widow</b>
</div>
<div>
<i class="sprite bg-Bullseye"></i>
<b>Bullseye</b>
</div>
<div>
<i class="sprite bg-Cable"></i>
<b>Cable</b>
</div>
<div>
<i class="sprite bg-Captain_America"></i>
<b>Captain America</b>
</div>
<div>
<i class="sprite bg-Captain_Marvel"></i>
<b>Captain Marvel</b>
</div>
<div>
<i class="sprite bg-Carnage"></i>
<b>Carnage</b>
</div>
</div>