The above is what we are trying to achieve but how to do it? Well, the first thing to do is to not use an image. A Blurb Module is a much better choice for this, simply because it provides a handy package containing both an image and a piece of text (in fact two pieces of text – the title and content) into a single element that we can style with CSS.

First, create a Blurb Module and give it a title and an image. We usually style the image as ‘No Animation’, but that is up to you. Do not add any content. if you do, the positioning of the title will not work. Now, make sure that you give the Blurb a CSS Class. You can find that by editing the Blurb then going to the Custom CSS tab. We have given ours a CSS class of blurb-title. if you use something else, you will need to change the class in the code below.

We recommend you use a child theme for this but you can put your CSS into the Divi->Theme Options->Custom CSS if you want.

The title is an h4 so we will target that. The first CSS we will add moves the title up a bit and brings it to the front. The position, especially the top,  is rather arbitrary. Setting the z-index to 1 should bring the title in front of the Blurb image.

.blurb-title h4 {
    position: absolute;
    left: 0%;
    top: 70%;
    z-index: 1;
}

So far, so good. Of course, we don’t know what colour the image will be so it would be good to add a background to the title so that it stands out. We can do this by using some more CSS –

.blurb-title h4 {
    position: absolute;
    left: 0%;
    top: 70%;
    z-index: 1;
    background-color:white;
    opacity:0.7;
}

Ok, the title stripe needs to extend across the whole of the image. We do this by setting the width to 100%. This will get its width from the containing element, the image. We will also take the opportunity to center the text using text-align.

.blurb-title h4 {
    position: absolute;
    left: 0%;
    top: 70%;
    z-index: 1;
    background-color:white;
    opacity:0.7;
    text-align:center;
    width:100%;
}

Now, we want to finesse the vertical positioning, spacing and font size. We are going to use ems for this. That way, our sizes etc. might work ok as we resize the page. We modify the height, line-height and font-size until happy (I haven’t changed the font-size in this example).

.blurb-title h4 {
    position: absolute;
    left: 0%;
    top: 70%;
    z-index: 1;
    background-color:white;
    opacity:0.7;
    text-align:center;
    width:100%;
    height: 1.4em;
    line-height:1.4em;
}

We could stop now but there is one other thing you might consider doing. We have added a link to the Blurb Module and, if you mouse over it (above), you will see that the background image has a link, and the TITLE text has a link but the title background does NOT. This is because the text link has been made using an INLINE element, an <a>. if you inspect the code (right click on it in Google Chrome and select Inspect) it will look something like

<a href="#">Title</a>

Inline elements are as big as they need to be to hold their content but no bigger. So, there is a ‘blind spot’ on both sides of the title where there is no link on mouse hover. Unlike inline elements, block elements are as big as they can be. In other words, they fill the space allowed to them by their parent container. So, we are going to force the <a> to be a BLOCK level element and we can then force its width to be 100% –

.blurb-title h4 {
    position: absolute;
    left: 0%;
    top: 70%;
    z-index: 1;
    background-color:white;
    opacity:0.7;
    text-align:center;
    width:100%;
    height: 1.4em;
    line-height:1.4em;
}

.blurb-title a {
    display:block;
    width:100%;
}

Subscribe To Our Blog

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!