效果图
代码.
<style>
.bg{
background: pink;
width: 120px;
height: 120px;
}
.image-layer {
width: 120px;
height: 120px;
margin: 40px auto 0;
position: relative;
cursor: pointer;
overflow: hidden;
}
.image-layer:before {
content: '';
position: absolute;
top: 0;
right: 0;
border: 0px solid;
border-color: rgba(0, 0, 0, 0.2) #fff;
-webkit-transition: border .5s ease;
}
.image-layer:hover:before {
border-right-width: 50px;
border-bottom-width: 50px
}
</style>
</head>
<body>
<div class="image-layer" id="image-layer">
<div class="bg"></div>
</div>
</body>
</html>