Votre navigateur ne supporte pas cette démonstration
Petite démonstration en utilisant le module CSS Nesting encore en cours d'écriture, ce qui signifie que la syntaxe peut changer.
Lorem ipsum dolor
Ut nec justo a diam feugiat pulvinar sit amet suscipit nisl. Quisque et mauris arcu.
En savoir plus
<div class="hero">
<img src="image.jpg" alt>
<div>
<h2>Lorem ipsum dolor</h2>
<p>Ut nec justo a diam feugiat pulvinar sit amet suscipit nisl. Quisque et mauris arcu.</p>
<a href="#">En savoir plus</a>
</div>
</div>
*,
*::before,
*::after{
box-sizing: border-box
}
.hero {
--gradient: to top;
position: relative;
display: grid;
margin: 5rem auto;
max-height: 450px;
aspect-ratio: 16/9;
>*{
grid-area:1/1;
}
&::after {
content: "";
grid-area:1/1;
opacity: .9;
background: linear-gradient(var(--gradient),
black 0%, rgba(0, 0, 0, 0.995) 8.2%,
rgba(0, 0, 0, 0.981) 16%, rgba(0, 0, 0, 0.958) 23.4%,
rgba(0, 0, 0, 0.926) 30.4%, rgba(0, 0, 0, 0.885) 37.3%,
rgba(0, 0, 0, 0.835) 43.8%, rgba(0, 0, 0, 0.776) 50.2%,
rgba(0, 0, 0, 0.709) 56.5%, rgba(0, 0, 0, 0.633) 62.6%,
rgba(0, 0, 0, 0.548) 68.7%, rgba(0, 0, 0, 0.455) 74.8%,
rgba(0, 0, 0, 0.354) 81%, rgba(0, 0, 0, 0.244) 87.2%,
rgba(0, 0, 0, 0.126) 93.5%, rgba(0, 0, 0, 0) 100%) left center/100% no-repeat;
}
& img{
width: 100%;
height:100%;
object-fit: cover;
z-index:-2;
max-height:inherit;
}
> div {
padding-left: 1rem;
padding-right: 1rem;
width: 100%;
max-width:640px;
margin-right: auto;
margin-left: auto;
z-index:1;
text-wrap:balance;
place-self: end start;
>*{
color: #fff;
margin-bottom: 0.5rem;
}
& h2{
border:unset;
background:unset;
padding:unset;
font-size: clamp(1.35rem, 6vw, 2.15rem);
font-weight: 600;
}
& p{
font-size: clamp(1rem, 3vw, 1.25rem);
}
& a{
display:inline-flex;
}
}
@media (width >= 800px) {
--gradient: to right;
>div {
place-self: center start;
padding:unset
}
}
}