To find out how the effects are styled, you can go to Plugins > Editor, then off to the right in the dropdown box, select “Divi Image Intense”.
In the “Plugin Files” list below that, click the “image-intense/styles/n10s-styles.css” link. That will open up the stylesheet for the Image Intense module.
Look in the stylesheet for a section labeled like this, using “London” as an example:
/*---------------*/ /***** London *****/ /*---------------*/
To change the overlay color, you actually want to change the background color of the entire “figure”. Like this:
figure.n10s-london {
background-color: #000;
}
To change the caption text, you will want to adjust margins and font sizes using this selector:
figure.n10s-london p
So, to increase the font size (do this in your own child stylesheet so updates don’t override it!) and/or change placement of the caption, you’d do something like this:
figure.n10s-london p {
margin-left: 5%;
font-size: 110%;
}
The font face is simply inherited from whatever font you select as your header font in Divi’s customizer settings. But you could change that as well by defining the font-family.
figure.n10s-london h2 {
font-family: 'Open Sans'!important;
}
To make your images stretch to fit the column width:
figure.n10s {
width: 100%;
}
We couldn’t possibly put all of these customizations into the Image Intense interface — it’d be extremely overwhelming for everyone, but most customizations like you’re wanting can be easily achieved through CSS via your browser’s “Inspect” or “Inspect Element” tool. If you’re not familiar with this tool, here is a great tutorial: https://zapier.com/blog/inspect-element-tutorial/