JSFiddle - React, Tailwind, and code Playground

by Florian Ferbach

HTML

<div class="image">
    <div class="image-content">
    </div>
    <div class="corner top-left"></div>
</div>

CSS

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }

  40% {
    -webkit-transform: translate(-10px,-10px);
    transform: translate(-10px,-10px);
  }

  60% {
    -webkit-transform: translate(-10px,-10px);
    transform: translate(-10px, -10px);
  }
}


.image{
    width:400px;
    height:400px;
}

.image .image-content{
    position:absolute;
    z-index:10;
    top: 100px;
    left: 100px;
    overflow:hidden;
    width:200px;
    height:200px;
    border-radius:100px;
    border: 5px solid white;
    box-shadow: 0 0 10px #333,
        inset 0 0 5px #333;
    background: url('http://placehold.it/200x200/ffffff/000000') no-repeat center center;
}

.image .corner.top-left{
    position: absolute;
    z-index:9;
    height:130px;
    width:130px;
    top: 80px;
    left: 80px;
    background-color:red;
    border-top-left-radius:120px;
    -webkit-transition: -webkit-transform 1s, background-color 0.5s;
    -webkit-transform: scale(1,1) translate(0,0) !important;
    cursor: pointer;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.image .corner.top-left:hover {
    -webkit-transform: scale(1.5,1.5) translate(-20px,-20px) !important;
    -webkit-transition: -webkit-transform 1s, background-color 0.5s;
  animation-name: none;
  -webkit-animation-name: none;
    background-color:green;

}

.image-content:hover~.corner{
    
  -webkit-animation-name: bounce;
  animation-name: bounce;
}