HTML-CSS code

CSS: Image Text Overlay

This is a quick tutorial for adding overlay text to an image using only CSS and HTML. Although this tutorial is centered around WordPress, it is easily adaptable for usage on any other publishing platform.

I wanted to achieve the following goals with this little hack:

  • Hyperlink everything that is visible so it does not matter on which element the visitor clicks
  • The cursor should remain as a hand cursor only while over the visible elements
  • No element wrapping/floating

This is the result :

Hers is the HTML:

<div class="imgoverlaywrapper">
  <a href="http://12bytes.org/"><img class="imgoverlay" src="[image_path]" /></a>
  <p class="imgoverlaytxt"><a href="http://12bytes.org/">The overlay text...</a></p>
</div>

Here is how it needs to be pasted in the WordPress TinyMCE editor so it doesn’t get mangled:

<div class="imgoverlaywrapper"><a href="http://12bytes.org/"><img class="imgoverlay" src="[path to image]" /></a>
<p class="imgoverlaytxt"><a href="http://12bytes.org/">The overlay text...</a></p>
</div>

And here is the CSS you will need to add to your theme’s style sheet:

/* image text overlay */
.imgoverlaywrapper {
    margin: 5px 5px 5px 12px;
    position: relative;
}

.imgoverlay {
    margin: 0px !important;
}

.imgoverlaytxt a {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px 30px 30px 5px;
    color: #F5F5F5 !important;
    font: italic 22px verdana, tahoma, arial;
    left: -12px;
    margin: 0px !important;
    padding: 20px 60px 20px 40px;
    position: absolute;
    text-decoration: none;
    text-shadow: 2px 2px 5px #9B9B9B;
    top: 16%;
}

If you have trouble with the WordPress TinyMCE editor mangling your code, i would highly recommend installing the TinyMCE Advanced plug-in and activating the option to stop WordPress from removing the p and br tags in the text editor.

2 thoughts on “CSS: Image Text Overlay

Leave a Reply

Your email address will not be published. Required fields are marked *