Skip to content

Commit ff00818

Browse files
WebDevSimplifiedWebDevSimplified
committed
Finish Video
0 parents  commit ff00818

File tree

2 files changed

+127
-0
lines changed

2 files changed

+127
-0
lines changed

‎index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<div class="grid">
12+
<div class="img-wrapper">
13+
<img class="blur" src="https://picsum.photos/500?random=1">
14+
<div class="content fade">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse maiores aspernatur explicabo maxime doloremque rem porro ad in eveniet error!</div>
15+
</div>
16+
<div class="img-wrapper">
17+
<img class="zoom blur" src="https://picsum.photos/500?random=2">
18+
<div class="content fade">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse maiores aspernatur explicabo maxime doloremque rem porro ad in eveniet error!</div>
19+
</div>
20+
<div class="img-wrapper">
21+
<img class="blur" src="https://picsum.photos/500?random=3">
22+
<div class="content slide-left">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse maiores aspernatur explicabo maxime doloremque rem porro ad in eveniet error!</div>
23+
</div>
24+
<div class="img-wrapper">
25+
<img class="blur" src="https://picsum.photos/500?random=4">
26+
<div class="content slide-right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse maiores aspernatur explicabo maxime doloremque rem porro ad in eveniet error!</div>
27+
</div>
28+
<div class="img-wrapper">
29+
<img class="blur" src="https://picsum.photos/500?random=5">
30+
<div class="content slide-up">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse maiores aspernatur explicabo maxime doloremque rem porro ad in eveniet error!</div>
31+
</div>
32+
<div class="img-wrapper">
33+
<img class="blur" src="https://picsum.photos/500?random=6">
34+
<div class="content slide-down">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse maiores aspernatur explicabo maxime doloremque rem porro ad in eveniet error!</div>
35+
</div>
36+
<div class="img-wrapper">
37+
<img class="gray" src="https://picsum.photos/500?random=6">
38+
<div class="content slide-down">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse maiores aspernatur explicabo maxime doloremque rem porro ad in eveniet error!</div>
39+
</div>
40+
</div>
41+
</body>
42+
</html>

‎styles.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
body {
2+
margin: 0;
3+
margin-bottom: 25rem;
4+
}
5+
6+
.grid {
7+
display: grid;
8+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
9+
}
10+
11+
.img-wrapper {
12+
position: relative;
13+
overflow: hidden;
14+
}
15+
16+
.img-wrapper > img {
17+
display: block;
18+
width: 100%;
19+
aspect-ratio: 1 / 1;
20+
object-fit: cover;
21+
object-position: center;
22+
}
23+
24+
.img-wrapper > .content {
25+
position: absolute;
26+
inset: 0;
27+
font-size: 2rem;
28+
padding: 1rem;
29+
background: rgba(255, 255, 255, .4);
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
}
34+
35+
.img-wrapper > img,
36+
.img-wrapper > .content {
37+
transition: 200ms ease-in-out;
38+
}
39+
40+
.img-wrapper:hover > img.blur {
41+
filter: blur(5px);
42+
}
43+
44+
.img-wrapper:hover > img.gray {
45+
filter: grayscale(1);
46+
}
47+
48+
.img-wrapper:hover > img.zoom {
49+
transform: scale(1.1);
50+
}
51+
52+
.img-wrapper > .content.fade {
53+
opacity: 0;
54+
}
55+
.img-wrapper:hover > .content.fade {
56+
opacity: 1;
57+
}
58+
59+
.img-wrapper > .content.slide-left {
60+
transform: translateX(-100%);
61+
}
62+
.img-wrapper:hover > .content.slide-left {
63+
transform: translateX(0);
64+
}
65+
66+
.img-wrapper > .content.slide-right {
67+
transform: translateX(100%);
68+
}
69+
.img-wrapper:hover > .content.slide-right {
70+
transform: translateX(0);
71+
}
72+
73+
.img-wrapper > .content.slide-down {
74+
transform: translateY(-100%);
75+
}
76+
.img-wrapper:hover > .content.slide-down {
77+
transform: translateY(0);
78+
}
79+
80+
.img-wrapper > .content.slide-up {
81+
transform: translateY(100%);
82+
}
83+
.img-wrapper:hover > .content.slide-up {
84+
transform: translateY(0);
85+
}

0 commit comments

Comments
 (0)