update

src/app.css

@@ -161,4 +161,16 @@
 	.ticket-item:hover .ticket-img {
 		filter: invert(100%);
 	}
+	.ticket-item:hover .ticket-bg {
+		@apply bg-white;
+	}
+	.ticket-item .ticket-bg {
+		z-index: -2;
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #010101;
+	}
 }

src/routes/+page.svelte

@@ -135,31 +135,34 @@
 		<div class="grid lg:grid-cols-2 gap-10 mx-auto">
 			{#each data.config.tickets as tt}
 				<div
-					class="ticket-item {tt.ticketTypeClass} border py-10 px-10 hover:text-black hover:bg-white {data
+					class="ticket-item {tt.ticketTypeClass} border py-10 px-10 hover:text-black {data.config
-						.config.ticketing
+						.ticketing
 						? 'cursor-pointer'
 						: ''}"
 					on:mouseenter={animateSection(40)}
 					on:click={() => (data.config.ticketing ? goto(data.config.ticketingUrl) : false)}
 				>
+					<div class="ticket-bg" />
 					<div class="ticket-img" />
-					<div class="text-2xl uppercase">
+					<div style="z-index: 1;">
-						<a href={data.config.ticketingUrl} class="animate-section">{tt.title}</a>
+						<div class="text-2xl uppercase">
+							<a href={data.config.ticketingUrl} class="animate-section">{tt.title}</a>
+						</div>
+						<div class="text-2xl mt-5 font-bold">
+							<a href={data.config.ticketingUrl}>{tt.price}</a>
+						</div>
+						<ul class="mt-8 text-left list-disc px-6">
+							{#each tt.includes as ti}
+								<li class="mb-2 pl-2 text-sm">{ti}</li>
+							{/each}
+						</ul>
+						{#if tt.note}
+							<div class="mt-10 text-sm">{tt.note}</div>
+						{/if}
+						{#if tt.hint}
+							<div class="mt-10 markdown text-sm"><SvelteMarkdown source={tt.hint} /></div>
+						{/if}
 					</div>
-					<div class="text-2xl mt-5 font-bold">
-						<a href={data.config.ticketingUrl}>{tt.price}</a>
-					</div>
-					<ul class="mt-8 text-left list-disc px-6">
-						{#each tt.includes as ti}
-							<li class="mb-2 pl-2 text-sm">{ti}</li>
-						{/each}
-					</ul>
-					{#if tt.note}
-						<div class="mt-10 text-sm">{tt.note}</div>
-					{/if}
-					{#if tt.hint}
-						<div class="mt-10 markdown text-sm"><SvelteMarkdown source={tt.hint} /></div>
-					{/if}
 				</div>
 			{/each}
 		</div>