zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Project.astro styles for improved hover effects and transition durations

Browse Source
This commit is contained in:
EFEELE
2025-04-14 11:37:56 -06:00
parent 3e09845d68
commit cf3194d00d
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/portfolio/Project.astro
View File

@@ -4,8 +4,8 @@ const { title, url, image, languages, description, size = "xs" } = Astro.props;
import Capsule from "../ui/Capsule.astro"; import Capsule from "../ui/Capsule.astro";
--- ---
<a href={url} class="w-full h-full hover:scale-105 transition-all duration-300 ease-in-out rounded-3xl bg-gradient-to-br from-mint-50/50 to-mint-300/10 dark:from-zinc-800 dark:to-mint-800/10"> <a href={url} class="w-full h-full hover:scale-105 transition-all duration-300 ease-in-out rounded-3xl bg-gradient-to-br from-mint-50/50 to-mint-300/10 dark:from-zinc-800 dark:to-mint-800/10">
<article class="group h-full gap-4 p-4 max-md:p-6 flex flex-col justify-start items-center cursor-pointer transition-all duration-300 ease-in-out rounded-3xl bg-transparent backdrop-blur-lg overflow-hidden hover:shadow-[0_10px_10px_rgba(0,_0,_0,_0.05)] dark:border-0 dark:hover:shadow-[0_10px_10px_rgba(13,_188,_130,_0.05)] before:absolute before:size-36 before:aspect-square before:rounded-full before:blur-3xl dark:before:blur-3xl dark:before:opacity-20 before:opacity-5 before:transition before:-z-1 before:left-7/12 before:bottom-50 xl:before:-bottom-0 before:[background-image:radial-gradient(circle,_rgba(71,255,194)_0,_rgba(0,255,191)_100%)] dark:before:[background-image:radial-gradient(circle,_rgba(7,255,173)_0,_rgba(1,45,34)_100%)] after:absolute after:size-40 after:aspect-square after:rounded-full dark:after:blur-2xl after:blur-3xl dark:after:opacity-20 after:opacity-10 after:transition after:-z-1 after:-left-10 after:top-1/2 after:[background-image:radial-gradient(circle,_rgba(0,255,217)_0,_rgba(121,249,255,65%)_70%)] dark:after:[background-image:radial-gradient(circle,_rgba(0,255,218)_0,_rgba(2,181,190,65%)_70%)]"> <article class="group h-full gap-4 p-4 max-md:p-6 flex flex-col justify-start items-center cursor-pointer transition-all duration-200 ease-in-out rounded-3xl bg-transparent backdrop-blur-lg hover:backdrop-blur-none overflow-hidden hover:shadow-[0_10px_10px_rgba(0,_0,_0,_0.05)] dark:border-0 dark:hover:shadow-[0_10px_10px_rgba(13,_188,_130,_0.05)] before:absolute before:size-36 before:aspect-square before:rounded-full before:blur-3xl dark:before:blur-3xl dark:before:opacity-20 before:opacity-5 before:transition before:-z-1 before:left-7/12 before:bottom-50 xl:before:-bottom-0 before:[background-image:radial-gradient(circle,_rgba(71,255,194)_0,_rgba(0,255,191)_100%)] dark:before:[background-image:radial-gradient(circle,_rgba(7,255,173)_0,_rgba(1,45,34)_100%)] after:absolute after:size-40 after:aspect-square after:rounded-full dark:after:blur-2xl after:blur-3xl dark:after:opacity-20 after:opacity-10 after:transition after:-z-1 after:-left-10 after:top-1/2 after:[background-image:radial-gradient(circle,_rgba(0,255,217)_0,_rgba(121,249,255,65%)_70%)] dark:after:[background-image:radial-gradient(circle,_rgba(0,255,218)_0,_rgba(2,181,190,65%)_70%)]">
<div class="overflow-hidden rounded-xl"> <div class="overflow-hidden rounded-xl">
<img class="h-auto rounded-xl transition-all duration-300 ease-in-out group-hover:scale-105" src={image.url} alt={image.alt} /> <img class="h-auto rounded-xl transition-all duration-300 ease-in-out group-hover:scale-105" src={image.url} alt={image.alt} />
</div> </div>