FEATURE Handling click on cover

This commit is contained in:
Nonimart 2025-07-10 17:26:41 +02:00
parent 952bbe3969
commit 4236aaacf1
2 changed files with 25 additions and 10 deletions

View File

@ -23,11 +23,13 @@ $cover_image = get_field('artisan_cover', $postID);
<article class="card-artisans">
<?php if ($cover_image): ?>
<img src="<?php echo $cover_image['url'] ?>" alt="<?php echo $post_title ?>" class="card-artisans__cover-image">
<?php else: ?>
<img src="<?php echo $postDefautlThumbnail ?>" alt="<?php echo $post_title ?>" class="card-artisans__cover-image is-placeholder">
<?php endif; ?>
<a href="<?php echo get_the_permalink($postID) ?>" class="card-artisans__cover-container">
<?php if ($cover_image): ?>
<img src="<?php echo $cover_image['url'] ?>" alt="<?php echo $post_title ?>" class="card-artisans__cover-image">
<?php else: ?>
<img src="<?php echo $postDefautlThumbnail ?>" alt="<?php echo $post_title ?>" class="card-artisans__cover-image is-placeholder">
<?php endif; ?>
</a>
<div class="card-artisans__inner">
<h2 class="card-artisans__title"><?php echo $post_title ?></h2>

View File

@ -1,20 +1,33 @@
.card-artisans {
@apply bg-white rounded-lg shadowed;
@apply bg-white rounded-lg shadowed-md flex flex-col;
&__thumbnail {
@apply w-full h-32 lg:h-48 object-cover rounded-t-xl;
}
&__cover-container {
@apply w-full overflow-hidden rounded-t-xl;
&:hover .card-artisans__cover-image {
@apply scale-105;
filter: brightness(1.1);
}
&:hover .card-artisans__cover-image.is-placeholder {
filter: brightness(1);
}
&:has(.card-artisans__cover-image.is-placeholder) {
transform: scaleX(-1);
}
}
&__cover-image {
@apply w-full h-32 lg:h-48 object-cover rounded-t-xl;
@apply transition-all duration-300;
&.is-placeholder {
@apply bg-purple-50 py-4;
@apply object-contain;
transform: scaleX(-1);
/* transform: scaleX(-1); */
object-size: 120%;
}
}
&__inner {
@apply p-6;
@apply p-6 w-full grow flex flex-col;
}
&__title {
@apply !text-2xl font-bold text-patrimoine-sante-securite !my-0;
@ -30,7 +43,7 @@
}
&__adresse {
@apply font-normal underline-offset-4 inline-flex !mt-0 w-full;
@apply font-normal underline-offset-4 inline-flex !mt-auto w-full;
&:before {
@apply inline-flex mr-3 h-6 w-6 bg-center bg-contain bg-no-repeat;
content: '';