How to Add a Featured Tag with Text Over an Image


How to Add a Featured Tag with Text Over an Image

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.

selector::pseudo-element {
  property: value;
}

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.

  <figure class="figure">
    <img src="https://dummyimage.com/600x400/000/fff.jpg" alt="featured image" class="figure-img">
    <figcaption class="figure-caption">A short caption for the image</figcaption>
  </figure>

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.

/* Make the tag position relative to the figure */
.figure.tag {
  position: relative;
}

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.

/* set the base styles all tags should use */
.figure.tag::before {
  position: absolute;
  top: 10%;
  display: block;
  color: white;
  padding: 0.5rem 1rem;
  font-weight: bold;
}

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.

/* Specific variations for different tags */
.figure.tag-featured::before {
  content: "Featured";
  background: orange;
}
.figure.tag-sale::before {
  content: "Sale";
  background: red;
}

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

.figure.tag-out::before {
  content: "Out of Stock";
  background: #e2e2e2;
  border: #ccc;
  color: #444;
  top: 42%;
  right: 0;
  left: 0;
  width: 30%;
  margin: 0 auto;
  text-align: center;
}

View the Code Demo

Conclusion

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: Jake Lett
Jake Lett is a B2B marketing consultant with over 15 years of experience in the digital marketing industry. He specializes in SEO, HubSpot, and PPC campaign management. Jake has a proven track record of helping businesses increase their online visibility and drive more traffic, leads and sales. He is a Certified Google Ads Specialist and a Certified HubSpot Developer.

Topic:

Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter