Votre navigateur ne supporte pas cette démonstration.
Lorem ipsum dolor
Ut nec justo a diam feugiat pulvinar sit amet suscipit nisl. Quisque et mauris arcu.
En savoir plus
Le code :
<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
}
@supports (selector(&)) {
.att{display:none}
.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
}
}
}
}