Skip to content

Commit d65d5cb

Browse files
ZaidKhan2002ZaidKhan2002
committedJan 2, 2022
Added new display Card
1 parent dcae8d4 commit d65d5cb

File tree

6 files changed

+90
-0
lines changed

6 files changed

+90
-0
lines changed
 

‎Product_Display_Cards/Product_Card_04/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
## Image Hover Display Card
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align ="left">
5+
<a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a>
6+
<a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a>
7+
</p>
8+
9+
### Preview
10+
11+
![](https://github.com/Dezenix/frontend-html-css-js/blob/main/Product_Display_Cards/Product_Card_04/assets/Product_Display_Card.gif)

‎Product_Display_Cards/Product_Card_04/assets/Product_Display_Card.gif

55.8 MB
Loading

‎Product_Display_Cards/Product_Card_04/assets/img1.png

148 KB
Loading

‎Product_Display_Cards/Product_Card_04/assets/img2.png

194 KB
Loading

‎Product_Display_Cards/Product_Card_04/code/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
<link rel="stylesheet" href="style.css">
8+
<title>Image_Hover_Product_Card</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="box">
13+
<img src="/Product_Display_Cards/Product_Card_04/assets/img1.png" alt="person">
14+
</div>
15+
<div class="box">
16+
<img src="/Product_Display_Cards/Product_Card_04/assets/img2.png" alt="person">
17+
</div>
18+
</div>
19+
</body>
20+
</html>

‎Product_Display_Cards/Product_Card_04/code/style.css

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background: #262626;
13+
}
14+
.container {
15+
position: relative;
16+
display: flex;
17+
-webkit-box-reflect: below 1px linear-gradient(transparent,transparent,transparent,#0004);
18+
}
19+
.container .box {
20+
position: relative;
21+
width: 320px;
22+
height: 400px;
23+
margin: 0 20px;
24+
border-radius: 20px;
25+
background: linear-gradient(45deg, #2da2ff 25%, #444 25%, #444 50%, #2da2ff 50%, #2da2ff 75%, #444 75%, #444 100%);
26+
background-size: 40px 40px;
27+
filter: grayscale(1);
28+
animation: animateBg 0.5s linear infinite;
29+
animation-play-state: paused;
30+
transition: filter 1s;
31+
display: flex;
32+
justify-content: center;
33+
}
34+
.container .box:nth-child(2) {
35+
background: linear-gradient(135deg, #ff61ae 25%, #444 25%, #444 50%, #ff61ae 50%, #ff61ae 75%, #444 75%, #444 100%);
36+
background-size: 40px 40px;
37+
}
38+
.container .box:hover {
39+
animation-play-state: running;
40+
filter: grayscale(0);
41+
}
42+
43+
@keyframes animateBg {
44+
0% {
45+
background-position: 0;
46+
}
47+
100% {
48+
background-position: 40px;
49+
}
50+
}
51+
.container .box img {
52+
position: absolute;
53+
bottom: 0;
54+
height: 90%;
55+
transition: height 0.5s;
56+
}
57+
.container .box:hover img {
58+
height: 480px;
59+
}

0 commit comments

Comments
 (0)
Please sign in to comment.