SOURCE

function handleClick() {
    document.querySelector('.img').classList.toggle('current')
}

<div class='img'>
    <img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg" alt="">
</div>
<button onclick='handleClick()'> click </button>

*{padding:0;margin:0;}
.img{width:630px;height:630px;}
.img img{display: block;width:100%;}

.img{
    overflow: hidden;
    -webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0);
    clip-path: polygon(0 0,0 0,100% 0,100% 0);
    opacity: 0;
    transition: opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);
    transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms;
    transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);
}

.img.current{
    opacity: 1;
    -webkit-clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
    clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
}