Skip to content

Commit 7bd9178

Browse files
HuXn-WebDevHuXn-WebDev
committed
Creative Image Hover Effect
1 parent 5c16bd4 commit 7bd9178

File tree

2 files changed

+70
-0
lines changed

2 files changed

+70
-0
lines changed

‎04. Creative Image Hover Effect/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Creative Image Hover Effect</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="container">
11+
<div class="clip clip1"></div>
12+
<div class="clip clip2"></div>
13+
<div class="clip clip3"></div>
14+
</section>
15+
</body>
16+
</html>

‎04. Creative Image Hover Effect/style.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
background: #555;
5+
height: 100vh;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
}
10+
11+
.container {
12+
position: relative;
13+
width: 800px;
14+
height: 500px;
15+
background: #222;
16+
}
17+
18+
.clip {
19+
position: absolute;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 100%;
24+
transition: all 0.5s;
25+
}
26+
27+
.clip1 {
28+
background: url(https://images.unsplash.com/photo-1604537466158-719b1972feb8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80);
29+
background-size: cover;
30+
background-position: center;
31+
clip-path: polygon(0 0, 46% 0, 39% 100%, 0 100%);
32+
}
33+
34+
.clip2 {
35+
background: url(https://images.unsplash.com/photo-1502228213426-d4e9f2add0e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80);
36+
background-size: cover;
37+
background-position: center;
38+
clip-path: polygon(19% 0, 87% 0, 64% 100%, 33% 100%);
39+
}
40+
41+
.clip3 {
42+
background: url(https://images.unsplash.com/photo-1519757043093-285fcb07a4e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80);
43+
background-size: cover;
44+
background-position: center;
45+
clip-path: polygon(82% 0, 100% 0, 100% 100%, 63% 100%);
46+
}
47+
48+
.container:hover .clip {
49+
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
50+
}
51+
52+
.container .clip:hover {
53+
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
54+
}

0 commit comments

Comments
 (0)