<div class="demo2">

    <img src="data:images/1.jpg">

</div>

.demo2{

            width: 300px;

            height: 300px;

            position: relative;

            margin: 100px auto;

        }

        .demo2 img{

            width: 100%;

        }

        .demo2::before{

                position: absolute;

                content: '';

                top:;

                right:;

                width:;

                height:;

                border-bottom-left-radius: 4px;

                border-color: rgba(0,0,0,0.2) #fff;

                border-width: 0px;

                border-style: solid;

                box-shadow: 0px 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);

                transition: all 0.4s ease-out;

        }

        .demo2:hover::before{

            border-bottom-width: 50px;

                border-right-width: 50px;

        }