Image Intense Documentation


Image Intense Tools

Image Intense

features + documentation

Get Your Copy!

what is image intense?

Well, a great example is what you see above.  A background image with text overlays, a foreground image and text effects that appear on hover, a link within the caption text, and a call to action button.  That’s just one module with a few simple settings. Plus, it is Intensely fast, because almost everything is handled by server-side PHP and CSS generation before it gets sent to the client.  No JavaScript files needed, thank you!  Just a small stylesheet to handle defaults client-side.

Image Intense is one of the most comprehensive and full-featured modules ever created for both the Divi and Extra themes for the WordPress website development platform. It incorporates features from 3 of the native Divi modules – Image, Text and Button – and then adds many additional UI/UX enhancements. Please note that Image Intense is not currently compatible with the Divi Builder plugin. Due to limitations by Elegant Themes for third party developers, Image Intense is not currently compatible with the Visual (front-end) Builder.

With it, you have the power to bring “above and beyond” life to your website with one of 22 different image hover transitions, mix blend modes, buttons, opacity settings and several other great features. Use it to entice increased user interaction or motivate with call-to-action elements on a basic e-commerce site that will drive visitors to purchase!

How about coupon reveals or beautiful blend modes on hover? Image Intense is as powerful as you are creative. The features and style options with Image Intense are truly compelling. Like the game of chess – simple yet eloquent at the basic level, but astonishingly overwhelming at the master level.

With just a few options, you have a site to look twice at. With some experience, you have a site that draws attention beyond a glance and into the realm of retention and lowered bounce rate.

Please note that Image Intense is designed to work best with small amounts of text in 1 or 2 column layouts. If using 3 or 4 column layouts, especially using a boxed layout or a smaller fixed width layout, you might run into some styling issues. We’ve tried to accommodate smaller modules as much as possible.

Image Intense Features

Image Intense Features

What does it do?

Skip to Docs

image intense features

You can think of Image Intense as a hybrid combination of the Image, Text, and Button modules. Just enough of each to satisfy the requirements of a visual and interactive experience.  Make sure you read and understand the basics of those modules before you move on to the power of the Image Intense module.

Image Intense from Superfly has the following features:


  • Images

    • Hover style – Image Intense comes with 22 different hover styles.  Some work best with only small amounts of text (or none). Others look great with more content in the Caption Text area.  For an example of each one, visit the hover style demonstration page.
    • Media size – This is one of the least understood but most useful features of Image Intense.  The module will find all available media sizes (those set in Settings > Media as well as the media sizes that your theme adds) and allow you to specify which size of your image you want to appear in the module.  This means smaller file sizes and faster page load speeds without having to create a specific size of an image with an external tool such as Photoshop, Gimp or RIOT. (Your images should still be optimized for file size before uploading to WordPress!)
    • “Image Opacity” and “Image Opacity on Hover” in Advanced Settings – Sliders allow for normal state (not hovered) foreground image opacity,  and also opacity on hover.  This gives you the ability to create superfly image transition hover effects.  Note that a long press on mobile is what triggers what is a hover on desktop.
    • Mix Blend Mode – Truly intense ways to have your background and foreground blend using Superfly CSS blend options. No need for plugins or JavaScript – tell your module how to blend, and it will obey your orders!  Be sure to check out Codrops on how and why this works.
    • Background Image – This is a great way to have 2 images in one module.  This allows some neat mix blend modes, or you can have an image display then change out with another image using the Opacity settings. Superfly swaps and reveals! The Image Intense module at the top of this page shows how a swap can work.

Mix blend: Difference

Image opacity 0.7
with background image

Mix blend: Luminosity

Background color #9e5406

  • Text

    • Title text – The Image Intense text sections are comprised of three (3) parts – Title 1, Title 2 and Overlay.  Title 1 and Title 2 are put together to create a “header text” for your Image Intense.  Normally (but not always), the Title 2 part has a bolder text, depending on the Hover Style you select.  In basic cases, you’ll want to limit each title text to one or two words. If you are an advanced Image Intense user, you can come up with pretty much any header text or style you want. Title text can be styled in almost any way – including font, font size, font color, letter spacing and line height.
    • Caption text – The Caption Text is the smaller text that sometimes appears when you hover over your Image Intense module. Other times it might already be there. Still other times it might move when you hover over the module. It all depends on which hover style effect you choose. As with the Title Text, the Caption Text can be styled just like you find in the Text module in the “Advanced Design Settings” tab.
    • Text formatting and links – Title or Caption text can be styled with basic HTML formatting tags for finer control of emphasis (italics) and strength (bold) within the text. You can also add line breaks, and turn selected text into a normal hypertext link using a built-in Image Intense pseudo-shortcode.
  • Buttons

    • Button basics – Choose to include a button, and you’ll immediately have a Divi-style button added on top of your Image Intense module.
    • Button styling – Use the Advanced Design Settings tab to style your button nearly any way possible, just like the Button module.
    • Button position – Forget about using custom CSS to try place your button where you want it!  Buttons in Image Intense can be placed in any of 9 positions within your module – from top left to bottom right.  Kind of like tic-tac-toe, Hollywood Squares and the Brady Bunch.

There are several examples on this page of what ‘Bottom Left’ to ‘Top Right’ button positions would look like.

Image Intense Documentation

Image Intense Documentation

How to use it.

Read the FAQs

image intense documentation

You can think of Image Intense as a hybrid combination of the Image, Text, and Button modules. Just enough of each to satisfy the requirements of a visual and interactive experience.  Make sure you read and understand the basics of those modules before you move on to the power of the Image Intense module.

OK.  Let’s go over the Image Intense settings that are not already covered by the documentation for the modules mentioned above.

Media Size

Media sizes are created by WordPress and possibly by themes and plugins. This is where you tell your Image Intense module what “size version” of the image you want use. You can even register your own sizes if you wish. Below is an example of what you might find in a Divi/WooCommerce install. Your options might be different.

Example media size options for Image Intense

Example media size options for Image Intense

Intense Hover Style

This is the heart of Image Intense, and the foundation on which it was originally built.  Because we believe in a global, open internet community we went with names that reflect just a few of the major cities around the world.

There are 22 different hover style effects.  Each named for a city and with its own set of strengths and weaknesses when it comes to how well it works with different configurations of text, buttons, backgrounds, etc.  If you want to use a particular one but it’s not working quite right for you, you can easily customize the CSS for it within your child stylesheet or in Theme Options. You can see examples of all of them right here. Learn more about styling Image Intense with this tutorial.

Overlay Titles 1 & 2

These are the two parts of the overlay title (header) texts. Normally they are best with just one or two words.  Overlay Title 1 will normally be in a normal font weight, while Title 2 will be in a heavier (bolded) font weight.  Each hover style will have its own Title text positioning and effects.

Image Intense Overlay Title 1 & 2 options

Image Intense Overlay Title 1 & 2 options

Overlay Caption

This is the smaller overlay caption text. The number of words you should use here depends on the Intense Hover Style selected above along with the size of the column this module is in.  Some Hover Styles have a border-right on the caption text.

You can also set the orientation (text-align) for the caption. Each Hover Style comes with what is generally best, but you can override it if you need to have a different style for the module.

Image Intense Overlay Caption options

Image Intense Overlay Caption options

Formatting with HTML tags - strength, emphasis and line breaks

Within your title or caption text, you can use a few formatting HTML tags to provide additional emphasis for any part of that text.  Simply wrap the text with opening and closing tags, just like normal HTML.  The allowed tags are:

  • <strong>Strong text</strong>
  • <b>Bold text</b>
  • <em>Emphasized text</em>
  • <i>Italized text</i>

You can also add a line break within your text:

  • Add your text,<br />and include a line break

Note that <strong> and <em> are semantic tags, not presentation.  This means they could actually look like anything, but by default look the same as the <b> and <i> tags.  <b> and <i> tags are presentational, and it is actually better to use CSS styling for actual bolded or italicized test.  See this Stack Overflow post for more info about that.

An example of how this would look is the Image Intense module at the start of the FAQ section further down this page.

Image Intense HTML formatting

Image Intense HTML formatting example

Inserting a Link in Text

You can turn any part of your text into a normal hypertext link.  Since WordPress does not allow us to add <a></a> anchor tags or shortcodes into that content, we created a “pseudo shortcode” for you to use for this purpose.

Usage is the same as the normal HTML anchor, but you replace the <a></a> tags with {n10link}{/n10slink} tags.  It would look something like this:

features + {n10slink href="#documentation"}documentation{/n10slink}

You can also use the normal “href”, “target” and “class” attributes if you want. An example of how that would work is at the very top of this page.  The word “documentation” in that Image Intense module is actually a hypertext link.

Within the module settings, it would look something like this:

Image Intense insert link

Image Intense insert link

Mix Blend Mode

Image Intense comes with a way to enable the CSS mix-blend-mode attribute.  This is probably one of the most advanced settings available with Image Intense.  It will take some practice to understand why and how it works – especially if you try at first and nothing seems to happen!

Visit this Codrops article to play around with mix blend modes and get a feel for the concept.  You can see some examples of this up in “Features” section above.mix-blend-modes


Image Opacities

This one is pretty simple.  Think of opacity as how “see through” something is.

Image Opacity determines how “transparent” the image is when you are not hovering.  The lower the opacity, the more that any background color or background image will show through.

The same applies to Image Opacity on Hover.  This setting applies to the same image when you mouse over (“hover”) or long press (touch screens) on the module.

An example of this is at the very top of this page.  We have an image specified in the “Image URL” setting in the “General Settings” tab, then we specify a Background Image in the “Advanced Design Settings” tab.  In that tab, we also set the “Image Opacity” to 1.0 and the “Image Opacity on Hover” to 0.  That way, when we are looking at the image it shows up completely. However, when we hover over (mouse) or long press (touchscreen) the module, the main image disappears completely and the background image shows up.  That’s what we might call a “reveal on hover”.

Image Intense opacities

Image Intense opacities

Button Position

This is the one setting for buttons that goes beyond the default Divi Button settings. It replaces the “Button Placement (Left/Right)” option you normally see in the Button Module settings.  This setting for Image Intense is in a weird place (as you’ll see below – sorry, there was nothing we could do about that), but we think you’ll find it a worthwhile compromise.

We sectioned off the Image Intense module into a 3×3 grid for button position.  That means you have 9 different places you can put your button, from top left to bottom right.  Note that “center” is horizontal (left to right) and “middle” is vertical (top to bottom).

To see how “Button Position” works, you’ll see several different Image Intense modules on this page that show different button positions.

This setting is in the “Advanced Design Settings” tab. Obviously, you must set “Include a Button” on the “General Settings” tab to “Yes” in order for this option to appear. This is where you’ll find it:

Image Intense Button Position

Image Intense Button Position

Image Intense FAQs

image intense FAQs

Go beyond the documentation


image intense frequently asked questions

After going through the documentation, you might still have a question.  Here is a list of the more common troubleshooting questions we get asked about Image Intense.

Again, if you have any problems afterwards, be sure to shoot us a support ticket or let us know in the “Comments” section below.  If your question seems to be a common one, we’ll add it to the list below!


How do I get updates?

Starting with version 3.1, you will receive update notifications right within your WordPress dashboard. You will be able to automatically do updates from your site without having to log in to your Superfly account to download the new version.

If we release an update announcement and you do not see an update notice in your dashboard, click the “Check for updates” link for Image Intense within your plugins listing page.

My header text does not have two different font weights like the docs say.


Image Intense does indeed style the Title 1 and Title 2 texts with different font weights.  If you are not seeing that, it’s probably because you are using a font that does not respect font weight.  For example, on this site the default header font is Gotham Ultra Regular, which does not have font weight variations.

In order to show the difference between Title 1 and Title 2 texts, we went with the ‘Open Sans’ font in all of the Image Intense modules on this page, which does distinguish font weight.


My padding/borders/margins aren't working right!

This has been fixed in version 2.0.  If you have not yet updated, please visit your downloads page.  If you continue to have troubles, shoot us a support ticket or let us know in the “Comments” section below.

Will it affect my site if I update from an earlier version to version 2.0?

Every effort has been made to ensure that version 2.0 is backwards compatible with earlier versions.  If you run into issues, most likely it would be because of further customization you’ve done on your site.

As with any other plugin update, please test the Image Intense update on a staging/development/test site before updating your live/production site!! You might have custom CSS that is now handled by Image Intense. Always, always test any updates (not just Image Intense) on a development or staging environment.  Never do updates to a live site!  If it turns out something isn’t working right in your testing area and you can’t figure it out, get in touch with us.

In fact, if your current Image Intense modules are working like you want them to, we would suggest leaving them alone. There is no security need to update. You can use version 2 of Image Intense on your new sites or when upgrading your current sites.

I'd like to make some additional CSS changes - where do I start?

We recently released a video tutorial that will walk you step-by-step through making some advanced customization changes to Image Intense. Check it out here!

How do I get support?

Make sure you read and understand the documentation for the Image, Text and Button modules.  Then make sure you read and understand this article.  If you have tried to accomplish something and just can’t get it to work after reading the documentation, then feel free to submit a support ticket.

If you’d like to see a new feature added, you can use the support ticket system as well.  Or, you can join our favorite Facebook group and start a discussion.

I found something wrong with (or missing in) the documention!

Good on you!  That’s why we love the Divi community. Send us a support ticket with what you think is incorrect.  We’ll take a look and fix anything wrong.

Better yet, leave us a comment below so you’ll get all the credit.

Is Image Intense compatible with the Divi Builder plugin?

Image Intense is not currently compatible with the Divi Builder plugin. The DB plugin has classes and structures that are quite a bit different from the Divi Theme. We hope to incorporate compatibility in a future version.

For More Information

If you have any further questions about Image Intense that aren’t answered above, go ahead and check out the Superfly knowledge base. You might even find out something you never thought of!

  1. Ben Stirling

    Hi there – can you please tell me how much text I can fit into a caption – is it limited by character length? Or just the space available?

    • Terry Hale

      Hiya, Ben! Thanks so much for your comment. 🙂

      In regards to text input, there is no reasonable limit to the amount of text you can put into your caption text. However, “reasonable” needs to take into account the fact that Image Intense is not designed to be a text module. In fact, it was created to enhance images with lots of features – adding limited and judicial amounts of text is just one of those features.

      There are several factors to consider:
      1) Using Image Intense in a single column row allows you more room to add text without it getting clipped.
      2) Using Image Intense in a 4-column row obviously creates a smaller space for text to show, even on desktop.
      3) No matter what, your site will need to be mobile friendly, which means that a lot of text that shows fine on desktop might not work well with the same module on a smaller viewport.

      The best way to handle this is to use text in the most efficient way possible – the least amount of text that conveys your message. You can also use your browser’s “Inspect” tool to find out how to adjust padding and/or margins on the caption text to increase the amount of that caption text that can be used on a particular hover style.

      Alternatively, Divi gives you the option to have things hide (disabled) at desktop/tablet/mobile sizes. You can create different Image Intense modules for display on each platform that give you the best usage of your text at each media query size.

      Hope this helps! Let us know if you have any more questions. 🙂


  2. Lucy

    Hi – is the second caption which appears in bold able to be on a second line rather than following on from the first caption?

    • Nathan Duvall

      Hi Lucy. I believe we’ve addressed this above in the toggle titled: “Formatting with HTML tags – strength, emphasis and line breaks”. Give that a look and if you still have questions, just let us know.

  3. Pierre


    I’ve been perhaps a little too speed to download the version 2.0. I’ve not been able to see the new features you were talking about :)… And the “packaging of the plugin is weird. the zip in the archive contain a folder named “styles”(containing 2 css) and 2 php files.
    So when I extract its content the 2 files are placed at the root of “plugins” and the folder ‘image-intense” is no more used.
    Is that really normal? It seems that your forget to keep the directory structure.




    • Nathan Duvall

      Pierre, try downloading version 2 again from your account page. You should see the folder along with the READ-ME-FIRST file inside the initial .zip folder.

  4. Garcia

    Hi there,
    In order to update from version 1.1 to 2.0, do I first have to deactivate the earlier version? When I try to install the new version a message saying the file already exists appears. But if I deactivate first the earlier version, this will affect the existing image intense modules on the site. Is there any way that I’m missing out on to update the plugin to the new version without having to deactivate the earlier version first?

  5. Lasse

    I installed the program (Image Intense) and activated the plugin.
    But, there is no Image Intense Module
    Everything looks exactly the same as before the installation of Image intence.
    I can not find a single one of the settings that are available after the installation of Image intence.
    Help needed.
    Lars Karlsson

    • Terry Hale

      Hello Lasse, thanks for the feedback! This sounds really unusual.

      Could you please visit our support portal and submit a ticket? We have a great system that will allow us to better track and document our progress in getting you fixed up.

      • Lasse

        Hi Terry.
        I have done that.
        I did that yesterday.

        • Lasse

          Hi Nathan.
          Wonderful, many thanks for your quick help. !!!
          I do not understand that I have not seen where the intense model is lokated before.
          Now I have found all the settings.
          Works incredibly well – a very good program. !!!

          • Dana

            I have the same problem. The module is not showing. What was the solution?

  6. heath werrett

    Is it possible for someone to send me the file?

    • Terry Hale

      Hi Heath,

      Within the file you received after you downloaded your purchase is a file called READ-ME-FIRST.rtf

      That should be what you are looking for. If not, please feel free to submit a support ticket so we can handle your request better. Thanks! 🙂

  7. Asim

    How do I change the diagonal line colour in the dynamic jazz effect (like in the first image on this page)?

    • Terry Hale

      Hi Asim,

      This is the CSS for the line colors (which are borders!) in the top image. Adjust as you need. 🙂

      figure.n10s-jazz figcaption::after {
      border-top: 3px solid #ec008c;
      border-bottom: 3px solid #ec008c;

      • Aluna Verse

        I’m having trouble with this also. I want to change the “border” lines in the taipeh effect. Where do I find this? Do I have to input custom CSS for this for every one?

        • Terry Hale

          Hi, Aluna. Thanks for your support and question!

          The Taipei effect is one of the more complicated ones. You will want to play with the CSS settings as they are, and apply them by using the on page CSS options (page settings), in Theme Options or in your child theme stylesheet.

          Here are the default Taipei settings:

          .n10s-taipei .n10s-overlay::after {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-top: 1px solid #fff;
          border-bottom: 1px solid #fff;
          content: ”;
          opacity: 0;
          -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
          transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
          -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          .n10s-taipei:hover .n10s-overlay::after {
          opacity: 1;
          -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
          transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);

          You’ll want to experiment with both the border and rotate settings. The “border” lines are part of the “after” pseudo-element on the normal and hover states.

  8. katie

    is it possible to make the caption text not all caps?

    • Terry Hale

      Hi Katie!

      The basic way to turn off the uppercase transform for the captions is as follows:

      figure.n10s figcaption p {
      text-transform: none;

      • Richard Ford

        Hi Terry,
        I can’t get this code to work for the button text. Stays on caps all the way.

        I’ve been adding lines of CSS text using the syntax:

        .n10s-london:hover img {
        opacity: 0.4;
        -webkit-transform: scale3d(1.1,1.1,1);
        transform: scale3d(1.1,1.1,1);
        and so on..

        What I haven’t grasped yet is what the word figure. is doing in front of this in your examples.
        Can you explain please?

        I am also trying to set placement for the button too. Bottom centre is too low – I’m trying to get it 50 pixels or so off the bottom, and also place the caption text better as well. Can’t figure out how to do that.

        Are there some obvious places to look?

        • Terry Hale

          Richard, to target the button text you will need something like this (substitute the ‘.n10s-taipei’ class for your specific hover style):

          .n10s-block.n10s-taipei .et_pb_promo_button.et_pb_button {
          text-transform: none;

          That targets only the button for that hover style, in case you want all caps on other hover styles.

          Not sure what you’re wanting to do with the hover CSS for the image…

          “figure” is just an HTML tag (like <div> or <article>). It is not always necessary to reference it in Image Intense CSS but we use it to ensure specificity.

          To raise the button off the bottom some, you’ll want to increase the ‘bottom’ CSS setting. Something like this:

          .n10s-block .n10s-overlay > a.et_pb_promo_button.et_pb_button {
          bottom: 15px;

          Caption text is wrapped in a <p> tag and it is identified as below, with some default CSS for each hover style. You can use your browser’s “Inspect…” tool to adjust settings as you need before you write your custom CSS.

          .n10s-taipei p {
          padding: 0.5em 2em !important;
          text-transform: none;
          font-size: 0.85em;
          opacity: 0;

  9. Emilio

    Hi Guys, Just downloaded and installed Image Intense. I was doing some render blocking/page load tests and I just tested my single page before and after activating Image Intense and according to GTMetrix, it adds 1 sec to my page load without creating a single instance. I’m wondering if you’ve done any performance testing with the plugin and can replicate my results. I’ll have to add some Image Intense instances and then I re-test and let you know what I find.

    Note. This was on a fresh installation of Divi with nothing else installed using a single page created from the built-in “Agency Homepage”. I added some modules to the page and a couple of big images. Before activating Image Intense, page load was 2.1 sec, after activating, page load went to 3.3.

    • Terry Hale

      Hi Emilio,

      Thanks for bringing up the topic! With only two small PHP files (which are processed on the server) and a small stylesheet that is served to the client, it’s hard to imagine Image Intense adding a full second (in your case – adding 50%) to the load speed.

      It would be great if you come up with some more information that you can. We haven’t heard anything else about slowdowns using the plugin. Considering the size of WordPress and Divi, again, it’s just hard to imagine.

      If you have a URL that you can share, I’d be happy to take a look at it as well. 🙂

  10. P

    Hi there,
    Like one or two other people here I have just uploaded version 2 however can’t see any new features. Tried this twice now and can’t see anything new to work with. Any thoughts?
    Thanks, Pete

  11. Joseph

    Hello is there any way to add default caption text that is viewable before hover then on hover other text is viewable?

    • Terry Hale

      Hi Joseph,

      Yes, this would be possible with some custom javascript. We’ll look into adding this into a future version. Thanks for the feedback!

  12. Paulina


    Thank you for heaving created this plugin! I have just purchased it on Divi space but I can see that I didn’t get the latest version (1.1 instead of 2.0). How can I get the update?

    Could you please also give me the css code to desactivate the caption text? I don’t want to use it and on Lonely Steve style it shows a white rectangle even if there is no text.

    Thanks in advance.!

    • Terry Hale

      Hi Paulina,

      I’ve seen some support tickets regarding this. Hopefully you had everything taken care of. If not, let me know. 🙂

  13. Derek

    Hello, I installed my plugin and it’s not showing up anywhere. Anby help would be great.

    • Terry Hale

      Hey Derek,

      We’ll need some more information from you. If you haven’t already, please shoot us a support ticket using the link below. Thanks for letting us know.

  14. Jorge

    Hi there,

    The former demo page was super useful before you changed it. In the former version, we could see the image intense hover style by reading the Title of each example until you decided to change that for usless city names… it’s so sad.

    Do you have a way to send me a layout (json file) or a xml file so that I can have a page where to see the different hover styles of image intense.

  15. Caro

    Hi, guys!

    I just purchased the plugin today, but I’m seeing the example for the Image hovers and I see the names of the image-intense-divi-extra page as cities and, in the module, there are different names like: Wild Romeo, Strange Dexter, Faithful Milo, etc. How do I know which is which?

    Please help. Thank you very much.

  16. guillermo

    Hi guys , this works with headers or divi sliders?

    • Terry Hale

      Hi Guillermo,

      Image Intense is a standalone module. It does not integrate with, nor is it aware of, other modules. Wherever you can use the native Image module, you can use Image Intense. 🙂

  17. Paulina

    I saw that you changed the hover styles’ names here but in the plugin I still have the old names and no update available. So actually when I choose a style I don’t know what it looks like. Thanks in advance for your help.

  18. Owen Carver

    I can’t wait to try these out on my next WordPress site. Pretty fancy! I’ll come back here if I have any questions, very cool to see all the comments responded to. You guys are doing this right. 🙂

  19. Ian Gilligan

    Hey this is stellar! I’m wondering how to remove the header/title upon hover, so that for smaller tiles the header/titles aren’t on top of/running into longer captions. Can you help with the code necessary please?!

    Many Thanks!

  20. Caden Damiano


    Would it be possible to use this for masonry blog posts?


    • Nathan Duvall

      Hi Caden — Image Intense was designed to be a standalone image module so you could potentially just use individual modules to link to the blog posts, though that’s a bit of a manual process and probably not the most intuitive. Stay tuned though, we’re currently developing a new plugin that may just reenvision Divi’s blog module a bit like you’re wanting. 😉

  21. Kenn

    I’m very impressed with Image Intense, but I have a question, can I have more than one button?

    • Nathan Duvall

      Hi Kenn, glad you’re enjoying the plugin! There’s currently no native option for multiple buttons at this time.

  22. Amanda Myers

    Hi, I’m using Berlin on my page and the Hover Color Background is a transparent orange. How can I change this?

    • Terry Hale

      Hey, Amanda! Sorry for the delay. Maybe you’ve already figured this out, but just in case…

      The “Berlin” hover effect has a hard-coded background color, as such:

      .n10s-berlin {
      background: #9e5406;

      You should be able to add CSS to your site to change the background color, as such:

      .n10s-berlin {
      background: #ffeeff; /* or you can use rgba() here */

      You can also experiment with the new background settings available on the “Content” tab.

  23. Nathan Harding


    I’m using a 3 column row and I’m wondering how do I get the images to fill the entire space of the row? See this screenshot:

    I’ve tried reducing the margins to 0px but it’s not working.

    Please help?


    • Terry Hale

      Heya, Nathan,

      Have you tried setting your gutter width to 1 (in Divi > Theme Customizer > General Settings > Layout Settings > WEBSITE GUTTER WIDTH)?

      If that doesn’t work for you, we’d really encourage you to put in a support ticket at At the very least, we’d like a link to the site/page you are concerned about.

      Thanks so much for your support! 🙂

  24. Andro Mateu


    You guys are amazing and I have learned so much, which is why I became a member. Just curious though; will this eventually work on the visual builder side? THANKS!!!

    • Nathan Duvall

      Hi Andro, thanks for the kind words! We’d love to integrate our plugins with the Visual Builder, but we’re not able to do so because Elegant Themes has not given 3rd party developers access to it. We’re hoping that changes in the near future, and when it does, we will see what we can do to accommodate.

  25. Emiel Nawijn

    Great plugin, thanks for that! One feature request for future updates maybe: would it be possible to make the media size device specific? So different sizes for desktop, tablet, smartphone (just as most divi settings)? I know have large images on desktop, but on mobile these images stay large, they just get stacked on top of each other. Obviously that’s good responsive behaviour, but I would like the images to be smaller too.


    • Terry Hale

      Hey Emiel, thanks for the kind words! We have been working on current and future updates to our plugins where we can take advantage of the WordPress (not Divi) way to specify image sizes based on viewport width.

      Great suggestion! Your encouragement keeps us motivated to continually improve what we are doing.

  26. laudanny.estrada

    Hello! Amazing plugin, you guys, thank you very much! I discovered your products through the DiviBooster website, and the moment I saw them I was just completely blown away. Thank you for creating so much value for the Divi community, friends!

    Secondly: I just wanted to clarify something about Image Intense licensing. So the unlimited license allows you to use Image Intense on unlimited projects, whether they be personal or commercial, including client sites. It seems the only thing that’s not allowed is reselling the plugin, either on its own or as part of a project. So if I develop a website for a client, it’s okay to include the Image Intense plugin in it as long as I don’t separately charge for the plugin itself, right?

    • Nathan Duvall

      Hi Laudanny, you are correct. 🙂

  27. Eric Lepping

    Can I apply CSS to Image Intense images to make the images round (border-radius: 50% for example)
    If so, the plugin will save me plenty of time!

    • Terry Hale

      Hi Eric!

      While several Image Intense styles would not work well with rounded corners (unless you also spend quite a bit of time learning the rest of the CSS that generates the hover effects on them), yes, you can absolutely apply a border-radius to the entire module which would give you the effect you are looking for.


  28. julie4

    I have added a button icon which floats right. How can I make it float left please? There is not an option for this in the Module Settings. Also, between “Button Icon Color” and “Only Show Icon On Hover for Button” there is a gap, which has a refresh symbol to the left but no other text. It is like a customisation option is missing (possible the float right/left option).

    • julie4

      BTW, I have tested that (the missing customisation option) in Safari and Chrome. Thanks.

      • Terry Hale

        Hey Julie,

        All button customization options are based on native Divi code as of a couple of versions back. It looks like you’ve found a need for an Image Intense update.

        Would you mind terribly putting in a support ticket at so we can address this better?

        Thanks for pointing this out!

  29. misha.kessler

    Hey Superfly, purchased Image Intense yesterday and absolutely love it – thank you for the hard work. Just curious, is there any way to adjust the caption width, understanding its default is 50% of the module?

    Haven’t found anything in the Divi Builder, and have yet to find any CSS fixes with some Googling research.

    Thanks! /misha

    • Terry Hale

      Hey Misha,

      Hover effects all have different styles and widths for the caption text (it’s part of what defines the uniqueness of each style). Because of so many variances, it wouldn’t make sense to try to have that configured in module settings. Rochester is one that uses 50% width, but others use other values.

      We’d be happy to show you how to adjust for a particular hover effect. If you feel like sharing a link here, we can get you set up here. Otherwise, please feel free to submit a support ticket with your site, what effect you’re wanting to use, and how you would like it adjusted.

      Thanks for being a fan, we really appreciate the great feedback! <3

  30. ben.miskie

    Maybe I’m missing something, how to I activate my plugin…perhaps that is why it is not working…?

    • Terry Hale

      Hey Ben,

      Hopefully our support team has addressed your problems. Cheers!

  31. Teresa


    I’m using the Berlin overlay but the text is showing up off the image (towards the bottom off of the border lines). Is there any way to center the caption text on the image itself if you’re not using a tile 1 or 2?

    thanks for your help!

    • Terry Hale

      Hi Teresa! Berlin uses a padding-top of 30% as its native behavior, using the following CSS. You can try adjusting it. You’re also welcome to open a support ticket and share the URL you are working with to see if we can help you further.

      .et_pb_post .n10s-berlin h2, .n10s-berlin h2 {
      padding-top: 30%; /* adjust as needed */

  32. lilian


    I am trying not to display title 2 in overlay.
    I use SYDNEY model.

    How to do ?

    • Terry Hale

      Hi Lilian,

      If you don’t want an Overlay Title Part 2, then you can just leave it blank.

  33. stephane.lemay1967

    I’m using the Sydney effect. The background image fades in from left to right and I wish to eliminate this effect. Divi settings are set at no effect. Can’t find the css yo stop this effect. Please help

    • stephane.lemay1967

      Never mind. Just found the setting in the Advanced tab….

  34. baileysurverys

    I’m using the Berlin affect with ONLY captions so that the text only appears when the user hovers. I want the text — 45px Oswald Light — to be completely centered in my 400×400 image. I have four images all the same size with the same text size. Some words are centered in their images — Lore; FAQ — while others are not — About, which is only slight off-center; Characters, which is so far off to the side it’s running out of the image. Please help me make About and Characters centered.

    • Terry Hale

      Hi Bailey, thanks for reaching out!

      If you don’t mind, please submit a support ticket with a link to the page you are working on. We’ll do as much as we can to get you set up like you want. 🙂

  35. webmaster11

    Votre plugin est-il compatible avec le thème DIVI 3.0.106 ?
    Merci de votre réponse.

    • Terry Hale

      Merci pour la question, Alain!

      Oui, très certainement. 🙂


Submit a Comment

Your email address will not be published. Required fields are marked *