How to Add a Featured Tag with Text Over an Image

  • read

In this tutorial I will show you how to place a featured tag over an image using CSS3 ::before pseudo elements. A common use case for this is eCommerce where you might want to visually show a product is featured, on sale, or out of stock. Since your products are displayed dynamically using a database, you are unable to modify the HTML markup to add the tag. So, CSS is perfect for this because we can add these tags when there is a class name change.

What is a pseudo element?

A definition for the word pseudo is “not real”. So in our case that fits perfectly because it is a visual graphic that doesn’t actually live in the HTML content of the page. Below is what the syntax looks like, take note of the double colons. Before you create pseudo elements in your layouts, ask yourself this question “If I printed the page, would I want this to appear?” If the answer is yes, pseudo elements are not the right fit and you should look into using javascript or outputting the content with server side code.

Step 1 – Build the Structure

I will be using Bootstrap 4 in my example but the CSS styles we will write can be used without it. Below is the HTML structure of a figure tag with an image and caption.

Step 2 – Create Custom CSS Class .tag

Since Bootstrap 4 does not include a built in class, we need to write something custom. I prefer to write custom classes following the pattern Bootstrap 4 uses. Creating a base class .tag and then write any variations with that class as the prefix to keep things organized. Below are the first two CSS rules.

The first rule has a position: relative which tells the browser anything absolutely positioned inside it should be position relative to its container size. If this is not specified, anything absolutely positioned will be positioned to the body tag.

Now we are going to write the pseudo element which will contain our tag content. These styles will be shared by all of the style variations like featured, on sale, and out of stock. This prevents redundancy in our code.

Step 3 – Write the Tag Content Variations

These tags use the content property to essentially add content before the selected element. Here I am just writing the words I want displayed, and then changing the containers background color. I suggest experimenting with turning the position absolute on and off to see how that changes things.

For the out of stock tag, I wanted it to be centered so I wrote a few more properties to do that.

View the Code Demo


So as you can see, pseudo content elements are very powerful and can help you add visual content to a page. Before you create these in your layouts, ask yourself this question “If I printed the page, would I want this to appear?” If the answer is yes, you will need to find a way to add the content into the DOM or HTML document of the page. You can do this by updating your server side code or javascript to add the element.

If you are new to CSS positioning, I highly recommend this article on CSS-Tricks that has demos on their differences.

Written by: Jacob Lett - Jacob is a digital marketing and web design consultant who helps businesses grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot platform.
Category: Tutorials
Tags: ,

kintsa featured image

FAST! Managed WordPress Hosting

Sign up today and get two months free

Learn More

Advertise Here