Skip to content

Commit 36b3e27

Browse files
authored
Merge pull request #205 from Code-eat-sleep-include/my_contribution_2
hover on image on the main page
2 parents 4c097d2 + be795cc commit 36b3e27

File tree

1 file changed

+23
-4
lines changed

1 file changed

+23
-4
lines changed

src/components/HomePage/header.css

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,30 @@
9898
border-radius: 10% 40%;
9999
}
100100

101-
102101
.chh__header-image img {
103-
width: 100%;
104-
height: 100%;
105-
border-radius: 10% 40%;
102+
transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
103+
filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.6));
104+
}
105+
106+
.chh__header-image img:hover {
107+
transform: scale(1.03);
108+
filter: drop-shadow(10px 10px 20px rgba(169, 158, 158, 0.6));
109+
}
110+
111+
@keyframes imageHoverEffect {
112+
0% {
113+
transform: scale(1);
114+
}
115+
50% {
116+
transform: scale(1.03);
117+
}
118+
100% {
119+
transform: scale(1.06);
120+
}
121+
}
122+
123+
.chh__header-image img:hover {
124+
animation: damping 0.6s ease-in-out; /* Applied damping keyframes on hover */
106125
}
107126

108127
@media screen and (max-width: 1050px) {

0 commit comments

Comments
 (0)