I've been meaning to write an article for some time now and this will be my first, so here goes nothing.

While lurking on dev.to I have seen a lot of people who are starting with web development and are looking to build a personal portfolio.

There are tons of good design guidelines out there on how to design a page, but very few actually go into detail on how to realize these designs. To help out, there are a lot of design frameworks available to help with just that, but these are not without their faults. There are even a lot of articles, also on this site, that argue against the use of such styling frameworks. I am not here to argue for or against styling frameworks - I do think they have their purpose - but I do feel that most people just use these frameworks for convenience and end up using only a tiny fraction of them. Most basic styling elements like cards, buttons and sticky headers for example, are not that difficult to make yourself and you don't need an entire framework for them.

I therefore decided to start a mini series I like to call: Simple styling tricks and how to css them.

Text overlays and protection

The first installment of this series is about image overlays. A very powerful styling tool is to overlay text (or anything else) on images. Companies like Google and Facebook use this all the time. The main challenge when overlaying text on images is the preservation of contrast. This can especially become an issue when you don't have control over the content, for example when you let users upload images. There are some simple tricks to overcome this issue by using so called text protection scrims.

I made a demo where you can see all the examples in action

The basics

Let's first start with the basic page frame for this little tutorial. All the examples given below use this basic frame.

<div id="banner">
    <div id="overlay">
        <div id="content">
            <h1>Overlay text</h1>
        </div>
    </div>
</div>

The #banner element holds the actual image. We will make use of the css background properties to display an image as a full size cover.

The #overlay element is used to mask the image underneath and create contract for the content above. By making use of css' rgba color property, we can make the overlay transparent to show the image below.

The #content element holds the content we want to overlay on the image. This element is only used to position the text inside the parent container.

These examples use divs. There is a lot of discussion going on about using semantic html. These examples, however, are very generic and can be apply to any kind of html tag. To illustrate I have made use of divs.

All the examples that will follow will also use the same css styling for the banner element. The height, width and margin properties are used for demo purpose and should be changed to fit your application.

#banner {
    /* DEMO */
    height: 80%;
    width: 100%;
    margin-bottom: 8px;

    /* Functional */
    position: relative;
    background-image: url("../img/snow.jpg");
    background-size: cover;
    background-position: center;
}

Full screen overlay

The first and most straightforward method is to overlay the image with a scrim entirely. This technique is useful when the image is not really important and the focus should be on the text.

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    background-color: rgba(0, 0, 0, 0.4);

}

#content {
    /* DEMO - Center text inside parent */
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Spot overlays

Scrim is slightly visible in the center due to high brightness and low contrast in background image.

A spot overlay is a more sophisticated overlay as it does not occlude the entire image. This way the image is not entirely darkened and some of the original image remains visible. For very bright images however, the scrim might be noticeable. For higher contrast images it will produce a very nice result.

/* EXAMPLE 2 */

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    /* Create radial gradient */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Scrim is slightly visible in the center due to high brightness and low contrast in background image.

Scrim much less visible, while nicely preserving image brightness.

Gradient bottom scrim

Gradient scrims are very useful for creating elements like social media posts and news feed items. They where promoted by the first Material design language iteration and can for example still be seen in the Google chromecast backdrop and Facebook's photo popups.

#overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%; /* Overlay half of the image */
    width: 100%;

    /* Create linear gradient */
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

#overlay h1 {
    position: absolute; 
    bottom: 0;
}

Solid bottom scrim

Oddly enough, the newly 'updated' material design language now favors solid scrims over gradients. This is a small adaption of the previous example where instead of a linear gradient, we just make the background of the overlay solid.

#overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    background-color: rgba(0, 0, 0, 0.4);
}

Using scrims like this is very flexible. You can experiment with different colors and positions for the overlays. And all it takes is a few lines of css!

So far my first installment on image overlays and text protection. If you have requests for other styling tricks, let me know!