From 70462eaae57c4fef8fd7aaa18ffa91514f7baf8d Mon Sep 17 00:00:00 2001
From: Refringe <me@refringe.com>
Date: Sun, 6 Oct 2024 19:36:24 -0600
Subject: [PATCH] Fixes Transition Bug

Resolves a bug where the hover transition caused a mod card to flip sideways when the page was changed.
---
 resources/views/components/mod-card.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/mod-card.blade.php b/resources/views/components/mod-card.blade.php
index d4e056f..f340ecc 100644
--- a/resources/views/components/mod-card.blade.php
+++ b/resources/views/components/mod-card.blade.php
@@ -4,13 +4,13 @@
     @if ($mod->featured && !request()->routeIs('home'))
         <div class="ribbon z-10">{{ __('Featured!') }}</div>
     @endif
-    <div class="flex flex-col group h-full w-full bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl overflow-hidden hover:shadow-lg hover:bg-gray-50 dark:hover:bg-black hover:shadow-gray-400 dark:hover:shadow-black transition-all duration-200">
+    <div class="flex flex-col group h-full w-full bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl overflow-hidden hover:shadow-lg hover:bg-gray-50 dark:hover:bg-black hover:shadow-gray-400 dark:hover:shadow-black transition-colors ease-out duration-700">
         <div class="h-auto md:h-full md:flex">
             <div class="h-auto md:h-full md:shrink-0 overflow-hidden">
                 @if ($mod->thumbnail)
                     <img src="{{ $mod->thumbnailUrl }}" alt="{{ $mod->name }}" class="h-48 w-full object-cover md:h-full md:w-48 transform group-hover:scale-110 transition-all duration-200">
                 @else
-                    <img src="https://placehold.co/450x450/31343C/EEE?font=source-sans-pro&text={{ urlencode($mod->name) }}" alt="{{ $mod->name }}" class="h-48 w-full object-cover md:h-full md:w-48 transform group-hover:scale-110 transition-all duration-200">
+                    <img src="https://placehold.co/450x450/31343C/EEE?font=source-sans-pro&text={{ urlencode($mod->name) }}" alt="{{ $mod->name }}" class="h-48 w-full object-cover md:h-full md:w-48 group-hover:scale-110 transition-transform ease-in-out duration-500">
                 @endif
             </div>
             <div class="flex flex-col w-full justify-between p-5">