add image animation

QwikDev · Jan 2, 2025 · 8ee572d · 8ee572d
1 parent 219d657
commit 8ee572d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/apps/website/.astro/types.d.ts b/apps/website/.astro/types.d.ts
@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro
@@ -12,7 +12,10 @@ import heroImage from "../assets/q-astro-hero.png";
     <Background />
     <div class="grid-line" aria-hidden="true"></div>
     <div class="intro">
-      <Image class="hero-image" src={heroImage} alt="Qwik + Astro" />
+
+      <div class="overlay">
+        <Image class="hero-image" src={heroImage} alt="Qwik + Astro" />
+      </div>
 
       <h1>
         {
@@ -49,6 +52,11 @@ import heroImage from "../assets/q-astro-hero.png";
     object-fit: cover;
     height: 200px;
     border-radius: 8px;
+    mask-image: radial-gradient(100% 100% at center, var(--off-black) 20%, transparent 100%);
+    -webkit-mask-image: radial-gradient(50% 100% at center, var(--off-black) 20%, transparent 100%);
+    animation: fade-in 0.75s forwards;
+    animation-delay: 2.25s;
+    opacity: 0;
   }
 
   h1 {
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		/// <reference types="astro/client" />
		/// <reference path="content.d.ts" />