Skip to main content

How To Add Overlay Text on a Clickable Image

The idea is just to overlay some text over an image. Here is a very simple tutorial to design image overlays in HTML and CSS only. Indeed, who has never wanted to quickly position a text over an image?

The code provided in this article may apply to any website. Simply integrate the HTML code on a page and the CSS code into your stylesheet.

You can find different ways to do it on the internet, but I wanted to synthesize everything I found to extract a minimal and above all clean solution.

What is an image text overlay?

For me, an overlay is just a layer put on top of another. In HTML, it means that it is out of the flow, because it has to be positioned over another element, which is not possible with the default behaviour.

Note: I'm not talking here about text over a background image, which is standard in HTML, but text over an image element (the img tag).

The HTML code

Putting the image in as a background image of the wrapping div would be easier, but in this scenario I see the images as content, and thus belongs in the HTML. We’ll use that wrapping div as a container for absolute positioning.


<div class="media"></div>
<div class="media"><a href="#"><img alt="" class="img-fluid media-image" src="https://1.bp.blogspot.com/-wCNjKq-9VTk/X8zQ2XG1IrI/AAAAAAAAEEM/5StMkOT7dl0E4r1FQXgNTRbtuwZakai4QCLcBGAsYHQ/w800-h450-p-k-no-nu/web-design-3.jpg"/>
<div class="media-body">
<h1>Post Title</h1>
<p>Your content...</p>
</div></a>
</div>

The CSS code:

I tried to factorize the code to make it simple, readable, compact and easily usable.


.media {display:inline-block;position:relative;vertical-align:top;}
.media-image {display:block;}
.media-body {background:rgba(48,56,67,0.9);bottom:0;color: white;font-size:1em;left:0;opacity:0;overflow:hidden;padding:3.75em 3em;position:absolute;text-align:center;top:0;right:0;-webkit-transition:0.6s;transition:0.6s;}

.media-body:hover {opacity:1;}
.media-body:after,
.media-body:before {border: 1px solid #777;bottom:1em;content: '';left:1em;opacity:0;position:absolute;right:1em;top:1em;-webkit-transform:scale(1.5);-ms-transform: scale(1.5);transform:scale(1.5);-webkit-transition:0.6s 0.2s;transition:0.6s 0.2s;}
.media-body:before {border-bottom:none;border-top:none;left:2em;right:2em;}

.media-body:after {border-left:none;border-right:none;bottom:2em;top:2em;}

.media-body:hover:after,
.media-body:hover:before {-webkit-transform:scale(1);-ms-transform: scale(1);transform:scale(1);opacity:1;}

.media-body:hover:before {-webkit-transform:scale(1);-ms-transform: scale(1);transform:scale(1);opacity:1;content:"\e095";font-family:"Glyphicons Halflings";font-size:50px;line-height:1;margin:0px;display:inline-block;padding-right:5px;}

.media-body h2 {margin-top:0;color:#fff;}
.media-body p {margin-bottom:1.5em;color:#fff;}

Turn Your Website
into a Lead-Generating Machine

Webcopy, Designs and SEO are King, Queen, and Knight respectively. And how well you use them together creates a user experience that either drives people away or makes them click the "buy" button.

Copywriting

Want to make your offers irresistible? We write conversion-optimized copy for small and medium brands, digital agencies and online stores.

Custom Web Design

Creating a branded website can be the best thing you do for your business. Branding can help you figure out what and how to communicate your company's story.

Skyrocket Your Traffic

For more than 20 years, we've been providing SEO solutions for businesses wanting to expand their online presence, increase leads and grow their revenue.

Contact

Contact Us

About us

Archie Webmaker is a digital branding agency with a magical touch on brand identity, brand strategy, and marketing to drive business success.

Call Us

Email Us

archie@archiewebmaker.com
archiewebmaker@gmail.com

Working Hours

Mon - Fri: 9AM to 5PM
Saturday: 9AM to 1PM