I had a request for a tweak to get the following look:


So here we go!

The video


The class

Add the custom class to the ROW.

Like this:

Add ai-text-overlay in the row’s custom CSS class.


The snippet

Here’s the snippet that will do the styling for you.

.et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content {
  position: relative;
  width: 100%;
  max-width: 100%;
  line-height: 0; }
  .et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content .et_pb_main_blurb_image {
    margin-bottom: 0; }
  .et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px; }
    .et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container .et_pb_module_header {
      font-size: 14px;
      color: white;
      padding-bottom: 0; }


To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)


To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi



Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

Photo credit: