40 lines
807 B
CSS
40 lines
807 B
CSS
{da7f54c912074d85776a04fcf9629680fc74b07f true 807 style.css 0xc001e43570}
*{
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing: border-box;
|
|
}
|
|
body{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
background: #111;
|
|
}
|
|
.container{
|
|
position: relative;
|
|
width:550px;
|
|
height: 400px;
|
|
border: 4px solid #fff;
|
|
}
|
|
.container .box{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
.container .box:nth-child(1){
|
|
background: url(img/01.jpg);
|
|
transition: .5s;
|
|
}
|
|
.container .box:nth-child(2){
|
|
background: url(img/02.jpg);
|
|
z-index: 2;
|
|
transition: .5s;
|
|
clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%);
|
|
}
|
|
.container .box:nth-child(2):hover{
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
|
|
}
|
|
.container .box:nth-child(1):hover ~ .box:nth-child(2){
|
|
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
|
|
} |