From 23da02726d4733df64b8c5c976795dc0466ac4dc Mon Sep 17 00:00:00 2001 From: Priya-rai121 Date: Wed, 2 Oct 2024 00:07:25 +0530 Subject: [PATCH] added hover effect --- assets/css/style.css | 38 +++++++++++++++++++++++++++++++++++++- index.html | 4 ++-- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 380dfd7..de42417 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -2051,4 +2051,40 @@ textarea.input-field { left: 0; } -} \ No newline at end of file +} + + + +.hover\:shine { + position: relative; + overflow: hidden; +} + +.hover\:shine::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 200%; + height: 200%; + background-image: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0) 50%, transparent); + transform: translate(-100%, -100%); + transition: transform 0.7s ease-in-out; + opacity: 1; +} + +.hover\:shine:is(:hover, :focus-within)::after { + animation: shine 1.5s forwards; +} + +@keyframes shine { + 0% { + transform: translate(-100%, -100%); + opacity: 1; + } + 100% { + transform: translate(100%, 100%); + opacity: 0; + } +} + diff --git a/index.html b/index.html index e97ba51..e1ed5ec 100644 --- a/index.html +++ b/index.html @@ -987,7 +987,7 @@

Upcoming Event