As a web developer you probably had the requirement to place a text or link on an image. There are several hurdles like the maximum height of the image or position in the background.
With position relative or absolute this is of course possible, but sometimes it's not quite nice and fiddly. I found a relatively simple possibility with the display: grid.
Here is my example, feel free to test it 🙂:
CSS:
.main_image{grid-area: overflow;}
.main_text{
grid-area:overflow;
color: white;
margin: auto auto auto 5%;
font-size: 2rem;
line-height: 3rem;}
.main{
display: grid;
grid-template-columns: 1fr;
grid-template-rows:1fr;
grid-template-areas: "overflow";
}
HTML:
<div class="main"><div class="main_image">
<img src="https://images.unsplash.com/photo-1548783300-70b41bc84f56?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" style="width:100%; height:auto">
</div>
<div class="main_text">
<p>overlap text</p>
<h2>your text</h2>
<p>lorem ipsum lorem lorem</p>
</div> </div>`
