x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-16 10:05:25 +03:00 committed by GitHub
parent a77612437e
commit 1e552ff127
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
100_projects/23-clip-path-image-hover-effects/img/01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
100_projects/23-clip-path-image-hover-effects/img/02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

16
100_projects/23-clip-path-image-hover-effects/index.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>

40
100_projects/23-clip-path-image-hover-effects/style.css Normal file
View File

@ -0,0 +1,40 @@
*{
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);
}