Element of an image over text with simple CSS masking

  • by Amando Abreu
  • on 10 April 2016

A while ago at the room5/trivago magazine blog we pondered about having some fancy looking titles for some special posts. I played around with the possibility of having an element of the image “stick out” and go over the text of the title. As the image shows.

OK, so how?

The sad part is that it needs some image editing, and you need two images.

The first image is the whole image with all the elements therein.

Mine looks like this:

If we were to put the text over this image, it would simply go over everything, including the Eifel Tower.

Now we need image number two. We’re going to need to edit this image and remove the elements we want to be “behind” the text.

In my case, I remove everything except the Eifel Tower.

This image we will use as a background image of our text element, and use a background clipping mask(at he time of writing this was a webkit specific rule for chrome and some other webkit browsers). This means the white of the image will actually be the colour of the text!

In the end, you get this(view at 0.5x for simplicity):

See the Pen Responsive image layer over text by Amando Abreu (@amando96) on CodePen.

About the author

Amando Abreu is a serial entrepreneur, Fractional CTO, and engineer who has been involved in several startups and launched dozens of products. He has worked with companies such as trivago, Portugal Telecom, and Vizrt. He has experience in several industries, most notably e-commerce, SaaS, media, travel, insurance, property development, and construction.
No comments, just