<article class="card card-news">
<a href="#" title="RCF NX15">
<img src="https://source.unsplash.com/random" alt=""/>
<div class="card-news__content">
<h2>RCF NX15</h2>
<span>Lire cette actualité</span>
</div>
</a>
</article>
<article class="card card-news">
<a href="{{card_news.link}}" title="{{card_news.title}}">
{{{card_news.thumbnail}}}
<div class="card-news__content">
<h2>{{card_news.title}}</h2>
<span>Lire cette actualité</span>
</div>
</a>
</article>
{
"card_news": {
"title": "RCF NX15",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\"/>",
"content": "<p>Le retour de scène NX 15-SMA est équipé d'un nouvel amplificateur numérique de 700 watts et d'un nouvea transducteur 15\" coaxial à moteur néodyme qui garantissent une qualité et une définition son sans égal.</p>"
}
}
.card-news {
margin-bottom: $margin-l;
> a {
position: relative;
height: 0;
padding-top: 40%;
display: block;
text-decoration: none;
padding-bottom: $margin-m;
> img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 3;
}
.card-news__content {
position: absolute;
bottom: -1rem;
left: 1rem;
width: calc(100% - 2rem);
padding-top: 1rem;
margin: 0;
border-top: 1px solid $c-white;
z-index: 6;
transition: .3s ease;
border-bottom: 1px solid transparent;
h3 {
margin-bottom: 0;
color: $c-white;
transition: .3s ease;
}
span {
font-size: rem(16);
font-family: $font-primary;
color: $c-white;
opacity: 0;
transition: .3s ease;
}
}
&::before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
opacity: .8;
z-index: 4;
transition: .3s ease;
}
&::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(180deg, #A79360 0%, #71591C 100%);
opacity: 0;
z-index: 5;
transition: .3s ease;
}
&:hover, &:focus {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
.card-news__content {
bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid $c-white;
span { opacity: 1 }
}
&::before { opacity: 0 }
&::after { opacity: .8 }
}
}
}
There are no notes for this item.