How to Style the Image Intense Plugin

by

Learn how you can use CSS to change the hover colors, text, and styling for our popular Image Intense Plugin!

CSS: http://anthem.artillerymedia.co/addons/imageIntense.css

And if you’d like to purchase the Image Intense Plugin, featured in this tutorial, you can do so via the link below. Enjoy! =)

 

42 Comments
  1. Gary Wilson

    Hey there, fantastic tutorial, amazing stuff!
    I have one thing I would like to change but can’t get it to work, and wonder if you can help me please?
    I would like to remove the around the 2nd word (such as the CITY etc) to make it all the same font size, its in the H2 section but I cannot find a way to get the css right to do this?
    Any ideas?
    Thanks
    Gary

    Reply
  2. John Wooten

    Gary,

    Hi! Thanks for reading the post…

    Give this CSS a shot:

    figure.n10s h2 span {
        font-weight: 300;
    }
    

    Have a great day! =)

    Reply
  3. Terry Hale

    John, thanks a million for this! Very nicely done. πŸ™‚

    Reply
  4. John Wooten

    Thanks for making a killer plugin!!! =)

    Reply
  5. Alison

    Great tutorial! Thank you!

    Reply
    • John Wooten

      You bet Alison! =)

      Reply
  6. Susan Tomkin

    John, VERY helpful! Not only for css styling of Image Intense but showing in detail how you use Chrome’s inspect element. Just what I needed. Thanks.

    Reply
    • John Wooten

      Susan, you’re welcome! Thanks for the props! =)

      If you liked this video/tutorial, we’re releasing a Layout in the next week that contains the Divi Layout File and a 4-hour screencast of me building it from a Photoshop file.

      Here’s what the Layout look like: http://artillerymedia.co/wordpress/landing-page/

      Reply
  7. Susan Tomkin

    Sounds like another MUST SEE. Can’t wait!

    Reply
  8. Maria

    This rocks! And I agree with Susan that the bits showing how to use the Inspector was extremely helpful. But can you tell me how to put a border around my image?

    Reply
    • John Wooten

      Maria,

      Try this code:

      figure.n10s figcaption {
          border: 15px solid #fff;
      }
      

      Have a great day! =)

      Reply
  9. Michael Breslow

    Just used this plugin for the first time and love it. However (and you knew this was coming lol) I can’t seem to use it with the visual editor πŸ™ One feature that you might consider adding to this plugin is the ability to resize the image on-the-fly without having to go to Photoshop. WOW, talk about a plugin!

    Reply
    • Nathan Duvall

      Thanks Michael. We may introduce Image Intense to the Visual Editor at some point, but Elegant Themes hasn’t really made this an easy task to this point, so we don’t anticipate this feature being made available anytime soon. But we actually enjoy the backend experience with Image Intense, especially with as many settings and controls as it will have in version 2.0.

      Reply
  10. Dave

    Good morning..i like very much your plugin, but i have a question..if i want to add this kind of effects on yours plugin it will be possible?

    Here the website with the effects: http://littlesnippets.net/

    I’ve tried to add these effects in a different default Divi module, but they don’t really work properly…they works with image module but i can’t add text on them because Divi Image Module doesn’t have a field of Content text (for html), and like you can see from the site, those kind of effects use html (like text).
    I want to know if it will be possible to use these effects with your module, so if it is possible to add html…or maybe you can say to me how i can do.
    Many thanks
    Dave

    Reply
    • Nathan Duvall

      Hi Dave, we received your support ticket as well and responded there.

      Reply
  11. sarah

    I already love this plugin – thank you so much!!!
    When using the text overlay on fotos showing persons it would be nice to put the main h2 text on the bottom (above β€žLearn Moreβ€œ). Could you help me trying this out? Thanks a lot!!!

    Reply
    • Nathan Duvall

      Thanks Sarah! Do you have a link where you’re trying to do this? The CSS needed will be slightly different based on what effect you select.

      Reply
  12. sarah

    Thanks for your quick reply! I will send you a pm with more details. Thanks again!

    Reply
  13. juanma

    Hello,
    Please, how can I hide the title text when I do not roll hover? (I want it to only appear when doing roll hover)
    How can I delete or change the color of the lines around the text?
    Thank you

    Reply
    • Nathan Duvall

      Hi juanma, something like this should do the trick:

      figure.n10s h2 {
      opacity: 0;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
      }

      figure.n10s:hover h2 {
      opacity: 1;
      }

      Reply
      • juanma

        Hi Nathan. Work perfect!!
        Thank you very much!!
        Great tutorial & amazing stuff!!

        Reply
  14. Andre

    Nice plugin, but it has tons of errors:

    For example
    Every time I turn on the hover overlay effect, the whole website goes down: I get this error which I’ve never seen before with DIVI:

    Internal Server Error

    The server encountered an internal error or misconfiguration and was unable to complete your request.

    Please contact the server administrator and inform them of the time the error occurred, and the actions you performed just before this error.

    More information about this error may be available in the server error log.

    Please fix the plugin, ITS NOT READY FOR USE

    Reply
    • Nathan Duvall

      Hi Andre, sounds like you have some other issues going on, not related to Image Intense. It could be a plugin conflict or any number of different things. Many people have purchased and installed Image Intense without any issues, please contact our support team for help.

      Reply
  15. Lukasz

    Hi guys, how can I change the text colour. It’s white by default and I need it black. It does not work when I change it in Advanced Design settings.

    Reply
    • Nathan Duvall

      Hi Lukasz — if you’ve updated to the newest version of Image Intense (3.1.2 at the time of writing this), you can now do this natively in the Image Intense modules.

      Reply
  16. Andy Dennis

    Hi Nathan

    I am finding this all a little confusing as my css skills are non existent.

    All i want to do is change the hover overlay colour on the Seattle style.

    Trying to adapt from your code I came up with this and tried posting in into the divi page css field and then the module css, but nothing πŸ™‚

    figure.n10s-seattle figcaption::before {
    background: linear-gradient(to bottom, rgba(153, 204, 51, 0) 0%, rgba(153, 204, 51, 0.6) 75%);
    -webkit-linear-gradient(top, rgba(153,204,51,0) 0%, rgba(153,204,51,0.6) 75%);
    }

    Any help available on what the code should be?

    Many Thanks

    Reply
  17. Andy Dennis

    Hi Nathan

    Ahh thank you for that, this video was promoted on the site i bought the plug in from so i watched it before checking everything else out.

    Got what I needed now, much easier than doing the way the video describes ! A great plug in!

    One small issue that you may want to look at – I don’t think this one is me. I have amended the hover overlay gradient and for every style except Seattle it works fine. Seattle seems to still pull in the purple/grey colour into the overlay and mix it up with the colours that you choose. I tried about a dozen of the others and they work fine, thats why i think its not me this time πŸ™‚

    Many Thanks

    Reply
  18. Mike Abbott

    Hi Nathan and all,

    I’m using the Sydney layout on my site, but I was wondering how I could centre (both vertically and horizontally) the h2 and the caption if you could help please.

    Reply
    • Nathan Duvall

      Hey Mike, you’d need to add a little custom CSS for that particular effect. Something like this should do the trick:

      .n10s-sydney h2 {
      text-align: center;
      }

      .n10s-sydney:hover p {
      -webkit-transform: translate3d(50%,0,0);
      transform: translate3d(50%,0,0);
      }

      Reply
      • Mike Abbott

        Thanks for that Nathan – that adjusts it to horizontal centre over the image, so from there I just need to figure out to do it vertically πŸ™‚

        Reply
  19. Clint Lewis

    Hi there! Is there a way to remove the border in the “San Francisco” style?

    Reply
  20. Lineker Tomazeli

    Any reason why any html that I enter on “Overlay Caption Text” gets stripped out when I save the page? Next time a check the modules settings the “Overlay Caption Text” is empty.

    Can you fix this please?

    thanks. and great plugin

    Reply
    • Terry Hale

      Hi Lineker,

      If you haven’t already, please put in a support ticket so we can see what’s going on. The HTML options in the caption text field are limited to certain elements.

      Thanks!

      Reply
  21. Stephen Kaufman

    Hello All!

    Awesome plug in. Really enjoying it so far. Is there a way to make all the before – non hovered text on the Oslo white, then switch to whatever custom color or whatever is selected in the backend on hover, then back to white when there’s no focus?

    Reply
    • Terry Hale

      Hi Stephen,

      There are no settings for normal and hover state caption text colors. However, you can add a bit of CSS like this to accomplish what you are looking for:

      .n10s-oslo:hover p {
      color: #xxxxxx; /* use hex, rbg() or rgba() color here */
      }

      Cheers!

      Reply
  22. Jonathan LaRocca

    I have no idea how to add this to the text so it pops up on hover of that word… been trying read all the articles still cant figure it out… website due tomorrow!

    Reply
    • Terry Hale

      Hi Jonathan,

      Can you be more specific on what you are trying to do?

      Thanks!

      Reply
  23. Emiel Nawijn

    Hi, love the plugin and already have been playing with custom css and stuff. Everything working as expected, but I do have one small question/request.

    Would it be possible to add my own hover-styles to your already extensive list? I now change the existing styles to my own liking (so my ‘Berlin’ works different from your ‘Berlin’ :-)), but it would be even better if I can add my own styles. Preferably through my child-themes css or custom functions.php.

    I already have some custom modules added through the functions.php of my child theme (clickable and animated blurbs for instance), but I can’t seem to figure out how to add my own styles to your custom module, without breaking future updates.

    Thanks in advance for your reply.
    Cheers!

    Reply
    • Terry Hale

      Hi Emeil! So sorry for the delay on responding. Thanks so much for the kind words!

      Sounds like you have a good grasp of how to handle websites. A very complex option would be for me at some point to add a hook into the code that generates the list of options so that a child theme functions.php could filter it, plus looking at maybe a Theme Customizer setting for the CSS for the new style name.

      At this point, you can take a hover effect that you aren’t using, take the CSS for it and just write your own CSS in your child theme’s stylesheet. That would make sure your custom styling is not wiped out when Image Intense has an update.

      Really good feedback, I appreciate it. Definitely something to plan on for the future. πŸ™‚

      Reply
  24. laudanny.estrada

    Links are broken, yo. πŸ™

    Reply
    • John Wooten

      The CSS code link should work now. Sorry about that! =)

      Reply

Submit a Comment

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