JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

HTML

<div class="ellipse">
  <img src="//picsum.photos/300/600" alt="">
</div>

SCSS

.ellipse {
  width: 50%;
  overflow: hidden;
  border-radius: 50%;
  padding-top: calc(50% * (9 / 16));
  background-color: #aaa;
  position: relative;
  transition: transform 300ms ease;
  border-width: 3px;
  border-color: #696969;
  border-style: solid;
  
  &:hover {
    transform: rotate(15deg);
    
    & > img {
      transform: rotate(-15deg) scale(1.1);
    }
  }
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}