Skip to content

Commit 87d2f79

Browse files
aayush105aayush105
authored
Merge pull request #514 from manoj9896/fix/image-src-paths
Fix/image src paths
2 parents 80e3068 + 6cd1267 commit 87d2f79

File tree

2 files changed

+136
-123
lines changed

2 files changed

+136
-123
lines changed

‎misc/ImageHoverGallery.html

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,88 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Image Gallery With Hover Effects</title>
78
<style>
89
* {
9-
margin: 0;
10-
padding: 0;
11-
box-sizing: border-box;
12-
}
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
1314

14-
body {
15-
display: flex;
16-
justify-content: center;
17-
align-items: center;
18-
min-height: 100vh;
19-
background: #1a252c;
20-
}
15+
body {
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
min-height: 100vh;
20+
background: #1a252c;
21+
}
2122

22-
.container {
23-
position: relative;
24-
display: flex;
25-
justify-content: center;
26-
align-items: center;
27-
transform-style: preserve-3d;
28-
-webkit-box-reflect: below 1px linear-gradient(transparent, #0002);
29-
}
23+
.container {
24+
position: relative;
25+
display: flex;
26+
justify-content: center;
27+
align-items: center;
28+
transform-style: preserve-3d;
29+
-webkit-box-reflect: below 1px linear-gradient(transparent, #0002);
30+
}
3031

31-
.container .box {
32-
position: relative;
33-
width: 120px;
34-
height: 120px;
35-
transition: 0.5s;
36-
}
32+
.container .box {
33+
position: relative;
34+
width: 120px;
35+
height: 120px;
36+
transition: 0.5s;
37+
}
3738

38-
.container .box img {
39-
position: absolute;
40-
top: 0;
41-
left: 0;
42-
width: 100%;
43-
height: 100%;
44-
object-fit: cover;
45-
}
39+
.container .box img {
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
width: 100%;
44+
height: 100%;
45+
object-fit: cover;
46+
}
4647

47-
.container:hover > :not(:hover) {
48-
margin: 0 -20px;
49-
filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 45px #000);
50-
transform: perspective(500px) rotateY(45deg) scale(0.95);
51-
}
48+
.container:hover> :not(:hover) {
49+
margin: 0 -20px;
50+
filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 45px #000);
51+
transform: perspective(500px) rotateY(45deg) scale(0.95);
52+
}
5253

53-
.container .box:hover ~ .box {
54-
transform: perspective(500px) rotateY(-45deg) scale(0.95);
55-
}
54+
.container .box:hover~.box {
55+
transform: perspective(500px) rotateY(-45deg) scale(0.95);
56+
}
5657

57-
.container .box:hover {
58-
transform: perspective(500px) rotateY(0) scale(1.5);
59-
z-index: 1000;
60-
}
58+
.container .box:hover {
59+
transform: perspective(500px) rotateY(0) scale(1.5);
60+
z-index: 1000;
61+
}
6162
</style>
6263
</head>
64+
6365
<body>
6466
<div class="container">
6567
<div class="box">
66-
<img src="/images/1.png" alt="">
68+
<img src="../images/1.png" alt="">
6769
</div>
6870
<div class="box">
69-
<img src="/images/4.png" alt="">
71+
<img src="../images/4.png" alt="">
7072
</div>
7173
<div class="box">
72-
<img src="/images/3.png" alt="">
74+
<img src="../images/3.png" alt="">
7375
</div>
7476
<div class="box">
75-
<img src="/images/5.png" alt="">
77+
<img src="../images/5.png" alt="">
7678
</div>
7779
<div class="box">
78-
<img src="/images/2.png" alt="">
80+
<img src="../images/2.png" alt="">
7981
</div>
8082
<div class="box">
81-
<img src="/images/6.png" alt="">
83+
<img src="../images/6.png" alt="">
8284
</div>
8385
</div>
8486
</body>
87+
8588
</html>

‎misc/movingroad.html

Lines changed: 82 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,91 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Moving road </title>
7-
<style type="text/css">
8-
*{
9-
margin: 0;
10-
padding: 0;
11-
}
12-
body{
13-
width: 100vw;
14-
height: 100vh;
15-
display: flex;
16-
align-items: center;
17-
justify-content: center;
18-
position: relative;
19-
20-
background-color: rgb(191, 238, 162);
21-
}
22-
.road{
23-
position: absolute;
24-
width: 700px;
25-
height: 750px;
26-
background-color: rgb(66, 63, 63);
27-
transform-style: preserve-3d;
28-
transform-origin: bottom;
29-
transform:perspective(100px) rotateX(20deg);
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Moving road </title>
8+
<style type="text/css">
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
14+
body {
15+
width: 100vw;
16+
height: 100vh;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
position: relative;
21+
22+
background-color: rgb(191, 238, 162);
23+
}
24+
25+
.road {
26+
position: absolute;
27+
width: 700px;
28+
height: 750px;
29+
background-color: rgb(66, 63, 63);
30+
transform-style: preserve-3d;
31+
transform-origin: bottom;
32+
transform: perspective(100px) rotateX(20deg);
33+
34+
}
35+
36+
.road:before {
37+
content: "";
38+
position: absolute;
39+
z-index: -1;
40+
top: 0;
41+
left: 39%;
42+
right: 0;
43+
width: 130px;
44+
height: 100%;
45+
background: linear-gradient(0deg, rgb(225, 232, 24) 0%, rgb(208, 221, 24) 70%, rgb(66, 63, 63) 0%, rgb(66, 63, 63) 70%, rgb(66, 63, 63) 100%) top/100% 50%;
46+
bottom: 0;
47+
animation: color 0.6s linear infinite;
48+
}
3049

31-
}
32-
.road:before {
33-
content: "";
34-
position: absolute;
35-
z-index: -1;
36-
top: 0;
37-
left: 39%;
38-
right: 0;
39-
width: 130px;
40-
height: 100%;
41-
background: linear-gradient( 0deg, rgb(225, 232, 24) 0%, rgb(208, 221, 24) 70%, rgb(66, 63, 63) 0%, rgb(66, 63, 63) 70%, rgb(66, 63, 63) 100%) top/100% 50%;
42-
bottom: 0;
43-
animation: color 0.6s linear infinite;
44-
}
45-
.road .line1{
46-
47-
position: absolute;
48-
left: 20px;
49-
width: 10px;
50-
height: 100%;
51-
transform: rotate(0deg);
52-
background-color: white;
53-
}
54-
.road .line2{
55-
56-
position: absolute;
57-
right: 20px;
58-
width: 10px;
59-
height: 100%;
60-
transform: rotate(0deg);
61-
background-color: white;
62-
}
50+
.road .line1 {
6351

64-
@keyframes color {
65-
0% {
66-
background-position: top;
67-
}
68-
100% {
69-
background-position: bottom;
70-
}
71-
}
72-
</style>
52+
position: absolute;
53+
left: 20px;
54+
width: 10px;
55+
height: 100%;
56+
transform: rotate(0deg);
57+
background-color: white;
58+
}
59+
60+
.road .line2 {
61+
62+
position: absolute;
63+
right: 20px;
64+
width: 10px;
65+
height: 100%;
66+
transform: rotate(0deg);
67+
background-color: white;
68+
}
69+
70+
@keyframes color {
71+
0% {
72+
background-position: top;
73+
}
74+
75+
100% {
76+
background-position: bottom;
77+
}
78+
}
79+
</style>
7380
</head>
81+
7482
<body>
75-
<img src="/images/fresh-green-mountains-grassland.jpg" alt="img" height="610px" width="100%" style="translate: 0 -7.5rem;">
76-
<div class="road">
77-
<div class="line1"></div>
78-
<div class="line2"></div>
79-
</div>
83+
<img src="../images/fresh-green-mountains-grassland.jpg" alt="img" height="610px" width="100%"
84+
style="translate: 0 -7.5rem;">
85+
<div class="road">
86+
<div class="line1"></div>
87+
<div class="line2"></div>
88+
</div>
8089
</body>
90+
8191
</html>

0 commit comments

Comments
 (0)