100-project-100-days-website/100_projects/23-clip-path-image-hover-effects/style.css
2023-03-16 10:05:25 +03:00
Ask

40 lines
807 B
CSS

{da7f54c912074d85776a04fcf9629680fc74b07f true 807 style.css 0xc002a3bce0}

*{
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);
}