Edit HTML in Divi Theme

Question

This is my first post here, so apologies if anything is formatted incorrectly. Please do let me know how I can improve my questions.

I am building a website for a client using the Divi theme in Wordpress. I would like to create a custom overlay (showing the title of the video) to display on hover. I need it to appear in front of the video and it's displayed image (also an overlay) and behind the play button. Currently, the custom overlay sits on top of the play button on hover, which is obviously a problem since that button needs to be clickable.

I attempted to use the z-index property (being sure all the divs were positioned), but to no avail. I currently suspect that the reason the z-index isn't working is because my custom overlay overlay-one class is being applied to a parent div, and so isn't being included in the proper stacking context.

In order to move the class, I need to edit the HTML which I am not sure how to do in Divi. Usually, I'd directly edit via FTP but my client is one of those slightly paranoid people who doesn't want anyone to have FTP access...even the developer of his site. So, if there is a workaround that doesn't involve me fighting with my client over FTP, I'd appreciate knowing about it.

Link to homepage, I'm working with the first video "Welcome to Moab": http://finleyholidayproductions.com/home-finley-holiday-productions/

HTML showing overlay-one in the top-most div, I assume I need to move it to the div containing et_pb_video_overlay instead.

Here is the code:

 .et_pb_video_box { position: relative; z-index: -1; } .et_pb_video_overlay { position: absolute; z-index: 1; } .et_pb_video_play { position: absolute; z-index: 100; } .overlay-one { position: absolute; } .overlay-one:after { position: absolute; z-index: 5; content: ''; background: url('http://finleyholidayproductions.com/wp-content/uploads/2017/12/Video-Overlay-Template-Recovered.png'); background-size: cover; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: .5s ease all; } .overlay-one:hover:after { opacity: 1; } 

 <div class="et_pb_module et_pb_video overlay-one et_animated et_pb_video_0"> <div class="et_pb_video_box"> <iframe src="https://player.vimeo.com/video/230963151" width="1080" height="608" frameborder="0" title="Secrets of the Moab Desert" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> <div class="et_pb_video_overlay" style="background-image: url(http://finleyholidayproductions.com/wp-content/uploads/2017/12/Thumbnails-1-Secrets-of-the-Moab-Desert.jpg);"> <div class="et_pb_video_overlay_hover"> <a href="#" class="et_pb_video_play"></a> </div> </div> 

So in summary:

• I am correct in my solution
• How would I edit the HTML in Divi to enact this solution.

Thanks.

Answer 1

If you insist on not getting access to the html:

I would suggest adding an :after pseudo-element on class="et_pb_video_overlay_hover" . I would put the title in content: like so:

et_pb_video_overlay_hover::after {
    content: "Title";
    ///other css properties to style your title etc.
}