From 371e935030d440e7bdb7624af87050fd4b763852 Mon Sep 17 00:00:00 2001
From: Phan Huy Tran <p.tran@neusta.de>
Date: Wed, 13 Nov 2024 10:40:55 +0100
Subject: [PATCH] nice

---
 .../housing-location.component.css            | 17 ++++++++++
 .../housing-location.component.html           | 34 ++++++++++---------
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/app/housing-location/housing-location.component.css b/src/app/housing-location/housing-location.component.css
index e69de29..6901896 100644
--- a/src/app/housing-location/housing-location.component.css
+++ b/src/app/housing-location/housing-location.component.css
@@ -0,0 +1,17 @@
+.card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-link:hover .card {
+  transform: translateY(-5px);
+  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
+}
+
+.overlay {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.card-link:hover .overlay {
+  opacity: 0.1;
+}
diff --git a/src/app/housing-location/housing-location.component.html b/src/app/housing-location/housing-location.component.html
index 21433bf..0fa1704 100644
--- a/src/app/housing-location/housing-location.component.html
+++ b/src/app/housing-location/housing-location.component.html
@@ -1,16 +1,18 @@
-<section class="card h-100">
-  <div class="position-relative" style="height: 200px;">
-    <img
-      [src]="housingLocation.photo"
-      class="card-img-top position-absolute w-100 h-100"
-      style="object-fit: cover;"
-      alt="Exterior photo of {{ housingLocation.name }}"
-      crossorigin
-    />
-  </div>
-  <div class="card-body">
-    <h2 class="card-title">{{ housingLocation.name }}</h2>
-    <p class="card-text">{{ housingLocation.city }}, {{ housingLocation.state }}</p>
-    <a [routerLink]="['/details', housingLocation.id]">Learn More</a>
-  </div>
-</section>
+<a [routerLink]="['/details', housingLocation.id]" class="text-decoration-none card-link">
+  <section class="card h-100 border-0 shadow-sm">
+    <div class="position-relative" style="height: 200px;">
+      <img
+        [src]="housingLocation.photo"
+        class="card-img-top position-absolute w-100 h-100"
+        style="object-fit: cover;"
+        alt="Exterior photo of {{ housingLocation.name }}"
+        crossorigin
+      />
+      <div class="overlay position-absolute top-0 start-0 w-100 h-100 bg-primary"></div>
+    </div>
+    <div class="card-body">
+      <h2 class="card-title text-dark">{{ housingLocation.name }}</h2>
+      <p class="card-text text-secondary mb-0">{{ housingLocation.city }}, {{ housingLocation.state }}</p>
+    </div>
+  </section>
+</a>