FEATURE Handling click on cover
This commit is contained in:
parent
952bbe3969
commit
4236aaacf1
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: '';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user