JSFiddle - React, Tailwind, and code Playground

by enagu

HTML

<div class="cover">
  <a href="#" class="image-cover"></a>
</div>

SCSS

.cover{
  overflow: hidden;
  width: 50px;
  transition: all 1s cubic-bezier(0, 1.56, 0.54, 0.53);
  border-radius: 50px;
  
  &:hover{
    border-radius: 5px;
  }
  
  .image-cover{
     background-image: url("https://cdn.discordapp.com/icons/126245225801711616/bb7e4455a70cb2f8d1b7e7ec4e68f6ff.png");
    background-repeat: no-repeat;
    background-size: 50px 50px;
    border-radius: 0;
    height: 50px;
    width: 70px;
    display: block;

   }
}

JavaScript

/*let cover = document.querySelector('.cover');
cover.onmouseenter = function() { cover.style.borderRadius = "5px" };
cover.onmouseleave = function() { cover.style.borderRadius = "50px" };
*/