From 978c2a8548b8828bc30d825baf61f95e60cdab38 Mon Sep 17 00:00:00 2001 From: Niharika Shah Date: Thu, 23 May 2024 22:00:12 +0530 Subject: [PATCH 1/2] hover on image --- src/components/HomePage/header.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/components/HomePage/header.css b/src/components/HomePage/header.css index 53f33e416..128a1396e 100644 --- a/src/components/HomePage/header.css +++ b/src/components/HomePage/header.css @@ -103,6 +103,29 @@ width: 100%; height: 100%; border-radius: 10% 40%; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.chh__header-image img:hover { + transform: scale(1.1); + box-shadow: 0 10px 20px rgba(243, 240, 240, 0.2); +} + +@keyframes damping { + 0% { + transform: scale(1); + } + 40% { + transform: scale(1.06); + } + 60% { + transform: scale(1.05); + } +} + + +.chh__header-image img:hover { + animation: damping 0.6s ease-in-out; /* Applied damping keyframes on hover */ } @media screen and (max-width: 1050px) { From be795cca9b863362412216a0274fa89d52210e89 Mon Sep 17 00:00:00 2001 From: Niharika Shah Date: Thu, 23 May 2024 23:40:37 +0530 Subject: [PATCH 2/2] Made the req. changes --- src/components/HomePage/header.css | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/components/HomePage/header.css b/src/components/HomePage/header.css index 128a1396e..c27ed77f6 100644 --- a/src/components/HomePage/header.css +++ b/src/components/HomePage/header.css @@ -98,32 +98,28 @@ border-radius: 10% 40%; } - .chh__header-image img { - width: 100%; - height: 100%; - border-radius: 10% 40%; - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); + filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.6)); } .chh__header-image img:hover { - transform: scale(1.1); - box-shadow: 0 10px 20px rgba(243, 240, 240, 0.2); + transform: scale(1.03); + filter: drop-shadow(10px 10px 20px rgba(169, 158, 158, 0.6)); } -@keyframes damping { +@keyframes imageHoverEffect { 0% { transform: scale(1); } - 40% { - transform: scale(1.06); + 50% { + transform: scale(1.03); } - 60% { - transform: scale(1.05); + 100% { + transform: scale(1.06); } } - .chh__header-image img:hover { animation: damping 0.6s ease-in-out; /* Applied damping keyframes on hover */ }