Latest Comments
  1. Jaina

    What about mobile/touch screen devices, where there’s no rollover as such?

    • Justin

      Hey Jaina, thanks for chiming in! I updated the article to address mobile :)

  2. Evelyn

    The techniques you come up with are amazing! Thanks for sharing. Going to try this one on an upcoming birthday message I’m working on.

  3. Gary

    Is there a way to make the background image fluid responsive?

    • Justin

      Unfortunately many clients don’t support background image sizes that are needed to make it fluid responsive. However by using two (non background) images you can make it fluid but will involve a bit more markup to execute.

  4. Ian

    This is great. Thanks for sharing. I’m still having an issue disabling the reveal for mobile. Is there something I’m missing?

    Here is my code:
    @media screen and (max-device-width: 1024px){
    .reveal img{
    max-height: none !important;
    height: auto !important;
    }
    }

    @media screen and (max-width:9999px) {

    .reveal img{
    display: none !important;

    max-height: 0px;
    height:0px;
    }
    .reveal:hover img{
    display: block !important;
    max-height: none;
    height: auto;
    }

    * [lang=x-reveal] img{
    max-height: 0px;
    height:0px;
    }
    * [lang=x-reveal]:hover img{
    max-height: none;
    height: auto;
    }
    }

    • Justin

      I noticed you added a display: none !important. That causes it to not be disabled using the code snippet I provided.

      .reveal img{
      display: none !important;
      max-height: 0px;
      height:0px;
      }

  5. gnicky_it

    Hi guys, i’ve add some % in width to make it fully responsive and fix the heights in a rookie mode, the result is this http://codepen.io/gnicky_it/pen/eJKRvO.
    What do you think about it?

    • Justin

      Hey that’s cool! That example doesn’t work for Gmail and it kinda breaks in Outlook (both images are shown) but with a few tweaks it should work. I created a responsive rollover that I just was about to post that uses a dual image technique except it contains an extra div wrapped around the alternate image to hide it from Outlook. When I get a chance I’ll post a codepen to it.

      • gnicky_it

        Hi Justin, thanks for the tip.
        I raise adding a quest… what have I to do if I got a table, and not only some images, to hide and show only on hover?

        • Justin

          You can replace the image with a div and put any content you want inside it. Then in the style block instead of targeting the img you target the div’s class instead. You probably also need to use Outlook conditional comments so that the contents remain hidden in Outlook as well.

      • Sam

        Hey Justin,

        Did you get round to posting this? It’s something I’ve been looking into but my solutions are not particularly reliable. I’m interested in seeing what you came up with.

        I think it’s a really nice feature for certain emails.

  6. Jeremy Gordon

    First off – this is a blast to play with. That said, I cannot get this to work in gmail when I send through mailchimp – even when using the exact code in the codepen above. Any ideas on why that is?

    Thanks again for this!

    • Justin

      Hmm, does it work when you send it to your gmail account from this page? This only works in the Gmail webmail for gmail.com addresses.

  7. melody

    Hi there – is there a “click” or “tap” only option? Can I make this trackable?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">