How to Add a Featured Tag with Text Over an Image

Browse My Free Website Guides
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.


Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?

  • Related posts

    Tags: ,

    Want to Get Email Updates of New Posts? Join My Email Newsletter