<article class="card card-news-archive">
<a href="#" title="RCF NX15">
<div class="inner-box">
<div class="card-news__thumb"><img src="https://source.unsplash.com/random" alt="" /></div>
<div class="card-news__content">
<h3 class="h2">RCF NX15</h3>
<span>Lire cette actualité</span>
</div>
</div>
</a>
</article>
<article class="card card-news-archive">
<a href="{{card_news.link}}" title="{{card_news.title}}">
<div class="inner-box">
<div class="card-news__thumb">{{{card_news.thumbnail}}}</div>
<div class="card-news__content">
<h3 class="h2">{{card_news.title}}</h3>
<span>Lire cette actualité</span>
</div>
</div>
</a>
</article>
{
"card_news": {
"title": "RCF NX15",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\"/>"
}
}
.card-news-archive {
text-decoration: none;
margin-bottom: $margin-l;
> a {
@include mediaWQuery($media-query-l) {
@include aspect-ratio(24, 9);
}
display: block;
position: relative;
overflow: hidden;
text-decoration: none;
> .inner-box {
> .card-news__thumb {
position: relative;
height: 0;
padding-top: 56.25%;
@include mediaWQuery($media-query-l) {
@include absPosition($top: 0, $left: 0);
width: 100%;
height: 100%;
padding-top: 0;
}
> img {
@include absPosition($top: 0, $left: 0);
width: 100%;
height: 100%;
object-fit: cover;
}
}
@include mediaWQuery($media-query-l) {
&::after {
content: '';
@include absPosition($top: 0, $left: 0);
display: block;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, $c-gold-light 0%,$c-gold-dark 100%);
opacity: 0;
@include transition;
}
}
}
.card-news__content {
width: 100%;
height: 100%;
position: relative;
z-index: 10;
font-family: $font-primary;
padding: $margin-m;
@include mediaWQuery($media-query-l) {
opacity: 0;
@include transition;@supports (display: flex) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
h3 {
margin: 0;
line-height: $font-lineheight-s;
}
span { margin-top: $margin-s; }
}
&:hover, &:focus {
box-shadow: $box-shadow-xs;
.card-news__content { opacity: 1 }
> .inner-box::after { opacity: .9 }
}
}
}
There are no notes for this item.