ptran/yo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nice

Browse Source
This commit is contained in:
Phan Huy Tran 2024-11-13 10:40:55 +01:00
parent c794032bfd
commit 371e935030
2 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/housing-location/housing-location.component.css
View File

@ -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;
}

34
src/app/housing-location/housing-location.component.html
View File

@ -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>