Creating a Hero Image with CSS Grid

“Make Your Header Images Sooo Much Better”

It’s 2021.

I took a deep dive into CSS grid during UK Lockdown (exciting times).

CSS grid has been adopted by all the major browsers.

Let’s use CSS grid to create some hero images that are easy to understood, customize, and are fully responsive to look great on all devices.

I’m inspirational!

Hire me

<div class="hero-image">
  <div class="hero-tint">
    <div class="hero-content">
      <div class="hero-text">I'm inspirational!</div>
      <a class="hero-button" href="#contact-details" target="_blank">Hire me</a>
    </div>
  </div>
</div>

The hero-image is the overall container that will take the css background image. The hero-tint will stretch over the container and create a dark semi-transparent background, making the white text more readable. The hero-content is the container for the text and button. We will use CSS grid to position it on top of the .hero-tint div. A bit of text, a button/link. The standard stuff. Now let’s move onto where the grid magic will happens, the CSS.

Continue reading the full article…