Divi – blurb text overlay

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; }

[sc name=”customcss”]

[sc name=”learn css”]

Photo credit: