JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle"></div>

CSS

.circle {
  
  border: 2px solid orange;
  width: 130px;
  padding: 50px;
  height: 130px;
  background: url('https://i.imgur.com/lbc7iV5.jpg') no-repeat;
  background-position: 80%;
  background-size: cover;
  margin: 0 auto;
  transition: .5s;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.5);;
  
}



.circle:hover {
  
  border-radius: 50% 50% 50% 0%;
  transition: .5s;
  
}