<article class="card card-section">
<a href="#" title="Mariage" class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<div class="card-section--inner">
<h3 class="h2">Mariage</h3>
<p>Animation, DJ, son, lumière</p>
</div>
</a>
</article>
<article class="card card-section">
<a href="{{card_page.link}}" title="{{card_page.title}}" class="inner-box">
{{{card_page.thumbnail}}}
<div class="card-section--inner">
<h3 class="h2">{{card_page.title}}</h3>
{{{card_page.content}}}
</div>
</a>
</article>
{
"card_page": {
"title": "Mariage",
"content": "<p>Animation, DJ, son, lumière</p>",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
}
}
.card-section {
@include aspect-ratio(16, 9);
> a {
border-radius: $border-radius-card $border-radius-card 0
$border-radius-card;
overflow: hidden;
transform: translateZ(0);
@include transition;
> img {
object-fit: cover;
width: 100%;
height: 100%;
}
.card-section--inner {
position: absolute;
bottom: 0;
left: 0;
padding: $padding-card-inner;
color: $c-white;
z-index: 3;
transition: 0.2s ease;
> h3 {
line-height: 1;
margin: 0;
text-transform: uppercase;
font-size: 2em;
@include mediaWQuery($media-query-m) {
font-size: 2.2em;
}
@include mediaWQuery($media-query-l) {
font-size: 2.4em;
}
}
> p {
line-height: $font-lineheight-s;
margin: 0;
font-family: $font-primary;
@include mediaWQuery($media-query-m) {
font-size: $font-size-xl;
}
}
}
&::after {
content: "";
@include absPosition($top: 0, $right: false, $bottom: false, $left: 0);
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.3) 49.28%,
#000000 100%
);
opacity: 0.9;
transition: 0.3s ease-in-out;
z-index: 2;
}
&:hover,
&:focus {
box-shadow: $box-shadow-card;
&::after {
opacity: 1;
}
.card-section--inner {
transform: translateY(-10px);
}
}
}
@include mediaWQuery($media-query-s * 1.5) {
&:nth-child(2) a {
border-radius: $border-radius-card $border-radius-card
$border-radius-card 0;
}
&:nth-child(3) a {
border-radius: $border-radius-card 0 $border-radius-card
$border-radius-card;
}
&:nth-child(4) a {
border-radius: 0 $border-radius-card $border-radius-card
$border-radius-card;
}
}
}
There are no notes for this item.