This method using something know as a “pseudo-element”, which can be found in the advanced tab of the module settings.
If you’ve ever opened the custom CSS toggle, you’ve probably seen the boxes labelled “before” and “after”. These are pseudo elements!
These let you add things before and after the module. In this case we’re going to use the “after” psuedo element.
This method sticks the caption to the bottom corner so it’ll be completely mobile responsive.
Here’s how to do it…
Step 1:
Add an image module with your desired image, then in the advanced tab open the custom CSS toggle and add “position:relative” to the “main element” box.
Step 2a:
If you’d just like to have white text in the bottom of the image, add the following code to the “after” box in the custom css toggle. If you’d like it to be on the left, just replace the word “right” with “left”:
content: 'Photo by Unsplash';
position: absolute;
bottom: 5px;
right: 10px;
color: white;
line-height: 1em;
If you’d just like to have dark text with a white background, add the following code to the “after” box in the custom css toggle. If you’d like it to be on the left, just replace the word “right” with “left”:
content: 'Photo by Unsplash';
position: absolute;
bottom: 0px;
right: 0px;
padding: 4px;
background: white;
color: #1a1a1a;
line-height: 1em;
Click save and publish, and that’s it!
Let me know if you have any questions in the comment section below! You can also contact me directly via email at hello @ andyhooke.co.uk.
Get FREE Divi tutorials and layouts each month!
Join 400+ Divi enthusiasts and level up your web design game!
Such a cool tip! I knew there had to be an easier way than editing my images!
I do have one question. How would you control the size of the text?
Hey Jamie!
You can change the font size by adding the following the the css:
font-size: 16px;
Then just change the number to increase/decrease the size.
Hope that helps!
This is a great tip!!!! Just what I was looking for. Is there a way to make the text a link?
Hey Tika – glad you like it! You can’t add links directly to pseudo elements like this, but you can add a link to the image module.