JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>

CSS

#container {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
  cursor: pointer;
}

#container:before { 
  content: '';
  position: absolute;
  left: 28%;
  top: 28%;
  width: 300px; 
  height: 300px; 
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

#container.topLeft:before {
    top: -100px;
    left: -100px;
    width: 600px;
    height: 600px;
}

#container.bottomRight:before {
    top: 300px;
    left: 300px;
}

JavaScript

$('#container').click(function(e) {
    var posX = $(this).offset().left, posY = $(this).offset().top;
    
    posX = e.pageX - posX;
    posY = e.pageY - posY;
    
    var pos = posX + posY;
    
    if (pos > 200) {
        $('#container').removeClass('bottomRight').toggleClass('topLeft');
    } else if (pos<201) {
       $('#container').removeClass('topLeft').toggleClass('bottomRight');
    }
});