JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <img src="https://i.picsum.photos/id/408/600/600.jpg?hmac=SMY4MKLuU7XcQazVwNoZjv-9pDv2bABflH9EruND5LY" alt="">
</div>

CSS

.box {
    width: 200px;
    height: 200px;
    background: red;
    transition: .5s;
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);

}
.box.active {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);


}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

JavaScript

$('.box').click(function(){
	$(this).toggleClass('active')
})