File tree Expand file tree Collapse file tree 1 file changed +9
-13
lines changed Expand file tree Collapse file tree 1 file changed +9
-13
lines changed Original file line number Diff line number Diff line change 98
98
border-radius : 10% 40% ;
99
99
}
100
100
101
-
102
101
.chh__header-image img {
103
- width : 100% ;
104
- height : 100% ;
105
- border-radius : 10% 40% ;
106
- transition : transform 0.3s ease, box-shadow 0.3s ease;
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 ));
107
104
}
108
105
109
106
.chh__header-image img : hover {
110
- transform : scale (1.1 );
111
- box -shadow: 0 10px 20px rgba (243 , 240 , 240 , 0.2 );
107
+ transform : scale (1.03 );
108
+ filter : drop -shadow( 10 px 10px 20px rgba (169 , 158 , 158 , 0.6 ) );
112
109
}
113
110
114
- @keyframes damping {
111
+ @keyframes imageHoverEffect {
115
112
0% {
116
113
transform : scale (1 );
117
114
}
118
- 40 % {
119
- transform : scale (1.06 );
115
+ 50 % {
116
+ transform : scale (1.03 );
120
117
}
121
- 60 % {
122
- transform : scale (1.05 );
118
+ 100 % {
119
+ transform : scale (1.06 );
123
120
}
124
121
}
125
122
126
-
127
123
.chh__header-image img : hover {
128
124
animation : damping 0.6s ease-in-out; /* Applied damping keyframes on hover */
129
125
}
You can’t perform that action at this time.
0 commit comments