1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .image-layer {
8 384px;
9 height: 240px;
10 margin: 40px auto 0;
11 position: relative;
12 cursor: pointer;
13 overflow: hidden;
14 }
15
16 .image-layer:before {
17 content: '';
18 position: absolute;
19 top: 0;
20 right: 0;
21 border: 0px solid;
22 border-color: rgba(0, 0, 0, 0.2) #fff;
23 -webkit-transition: border .5s ease;
24 }
25
26 .image-layer:hover:before {
27 border-right- 80px;
28 border-bottom- 80px
29 }
30 </style>
31 </head>
32 <body>
33
34
35 <div class="image-layer" id="image-layer">
36 <img src="test.jpg" />
37 </div>
38
39 </body>
40 </html>
