title: Email Newsletter: Image size changing in Outlook 2016 (Desktop) on mouseover
body: <p>I am working on a newsletter design, in which I need to place two images side by side (under the Find a Camp Today section on the attached screenshot). I am using tables, tr and td to so. More precisely I am using a two column table to place my images in. But Outlook on Desktop is behaving in a very weird way. When I rollover my mouse on these images, the size of the images changes, and I feel a jump in the page.</p>
  
  <p>On top of this section, there is a three column section with images. But that works perfectly fine on mouseover.</p>
  
  <p>I even tried stripping my code down, and removed the  tags from around the images, but even using a simple  tag is creating the same issue. Can anyone please help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:o="urn:schemas-microsoft-com:office:office"&gt;
  &lt;head&gt;
      &lt;!--[if gte mso 9]&gt;&lt;xml&gt;
      &lt;o:OfficeDocumentSettings&gt;
      &lt;o:AllowPNG/&gt;
      &lt;o:PixelsPerInch&gt;96&lt;/o:PixelsPerInch&gt;
      &lt;/o:OfficeDocumentSettings&gt;
  &lt;/xml&gt;&lt;![endif]--&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;!--[if !mso]&gt;&lt;!--&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
  &lt;!--&lt;![endif]--&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  
  @media only screen and (max-width: 480px) {
  
      #header img {
          width: 100% !important;
          max-width: 600px !important;
      }
  
      #threeSteps img {
          width: 50px !important;
          height: auto !important;
      }
  }
  
  &lt;/style&gt;
      &lt;!--[if (gte mso 9)|(IE)]&gt;
      &lt;style type="text/css"&gt;
          table {border-collapse: collapse;}
      &lt;/style&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body style="margin: 0 !important; padding: 0; background-color: #284055;"&gt;
      &lt;center class="wrapper" style="width: 100%; table-layout: fixed; color: #284055; font-family:arial,'helvetica neue',helvetica,sans-serif;"&gt;
          &lt;div class="webkit" style="width: 100%; max-width: 600px; margin: 0 auto;"&gt;
              &lt;!--[if (gte mso 9)|(IE)]&gt;
              &lt;table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"&gt;
              &lt;tr&gt;
              &lt;td&gt;
                  &lt;![endif]--&gt;
                  &lt;table width="95%" cellspacing="0" cellpadding="0" border="0"; class="outerTable" align="center" style="table-layout: fixed; max-width: 600px; Margin: 0 auto; border-collapse: collapse;"&gt;
                      &lt;tbody&gt;
                          &lt;tr id = "preHeader"&gt;
                              &lt;td style="padding: 18px 0 9px 0"&gt;
                                  &lt;table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td style="width: 55%;"&gt;
                                                  &lt;div&gt;
                                                      &lt;a href="http://www.ussportscamps.com/" target="_blank"&gt;&lt;img align="none" height="52" src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/c92fc6ee-674b-4bde-8dce-096423d1f338.png" style="width: 150px; height: 52px; margin: 0px;" width="150"&gt;&lt;/a&gt;
                                                  &lt;/div&gt;
                                                  &lt;p style="margin-top: 3px;color: #FFFFFF; font-size:10px;"&gt;Offering the best locations across the country&lt;/p&gt;
                                              &lt;/td&gt;
                                              &lt;td style="width: 45%; text-align: right"&gt;
                                                  &lt;div class="phoneNo" style="text-align: right;"&gt;
                                                      &lt;img align="none" src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/936029f6-3875-447b-a16b-8d5f56dc1019.png" style="width: 12px; height: 12px; margin: 0px; margin-right:3px;"&gt;
                                                      &lt;span style="color: #FFFFFF; font-family:arial,helvetica neue,helvetica,sans-serif; line-height: 14px;"&gt;&lt;a href="#" style="display:table-cell; font-size:14px; vertical-align:middle; color: #FFFFFF; text-decoration: none;"&gt;1-800-645-3226&lt;/a&gt;&lt;/span&gt;
                                                  &lt;/div&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                          &lt;tr id="header"&gt;
                              &lt;td&gt;
                                  &lt;a href="" style="display: block;"&gt;&lt;img src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/fbab6265-6181-4b4a-a23e-f0b120c63bb5.jpg" width="600" style="display: block; width: 100%; max-width: 600px;"&gt;&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr id="introText" style="background-color: #FFFFFF; border: 1px solid #FFFFFF; border-left: 0; border-right: 0;"&gt;
                              &lt;td&gt;
                                  &lt;p style="padding: 18px; color: #97a5b1; font-size: 16px; line-height: 22px; text-align: center;"&gt;Searching for a camp at a top college? Looking for something at a driving distance from your local community? We’ve got all your needs covered.&lt;/p&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr id="threeSteps" style="background-color: #FFFFFF; border: 1px solid #FFFFFF; border-left: 0; border-right: 0;"&gt;
                              &lt;td&gt;
                                  &lt;table width="90%" cellspacing="0" cellpadding="0" border="0" style="width: 90%; margin: auto; border-collapse: collapse; line-height: 16px;"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr style="text-align: center;"&gt;
                                              &lt;td width="33.33%" valign="top"&gt;
                                                  &lt;div style="margin: 0 10px"&gt;
                                                      &lt;img src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/a4274d78-edd8-4fb0-a184-07a14a61658d.png"&gt;
                                                      &lt;p style="font-size: 12px;"&gt;Select a Sport&lt;/p&gt;
                                                  &lt;/div&gt;
                                              &lt;/td&gt;
                                              &lt;td width="33.33%" valign="top"&gt;
                                                  &lt;div style="margin: 0 10px"&gt;
                                                      &lt;img src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/29b4889a-f35c-438e-b888-9d3bc52f9e36.png"&gt;
                                                      &lt;p style="font-size: 12px;"&gt;Explore Programs &amp; Locations&lt;/p&gt;
                                                  &lt;/div&gt;
                                              &lt;/td&gt;
                                              &lt;td width="33.33%" valign="top"&gt;
                                                  &lt;div style="margin: 0 10px"&gt;
                                                      &lt;img src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/70d34e64-3c9f-4b55-a1ec-39cb24ec4873.png"&gt;
                                                      &lt;p style="font-size: 12px;"&gt;Reserve your camp&lt;/p&gt;
                                                  &lt;/div&gt;
                                              &lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;  
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr id="learnMoreLink" style="background-color: #FFFFFF; border: 1px solid #FFFFFF; border-right: 0; border-left: 0;"&gt;
                              &lt;td&gt;
                                  &lt;div style="padding-top: 12px; text-align: center;"&gt;
                                      &lt;a href="#" style="text-decoration: none;"&gt;&lt;span style="color: #2982cf; font-size: 12px;"&gt;Learn More&lt;/span&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr class="separator" style="background-color: #FFFFFF; border: 1px solid #FFFFFF; border-right: 0; border-left: 0;"&gt;
                              &lt;td&gt;
                                  &lt;hr style="width: 90%; margin: 30px auto; border: 0; border-top: 1px solid #e9ecee;"&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr id="sportsWidgetHeading" style="background-color: #FFFFFF; border: 1px solid #FFFFFF; border-left: 0; border-right: 0;"&gt;
                              &lt;td&gt;
                                  &lt;h2 style="margin: 0; color: #284055; font-size: 16px; text-align: center; text-transform: uppercase;"&gt;Find a Camp Today&lt;/h2&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr id="sportsWidgets" style="background-color: #FFFFFF; border: 1px solid #FFFFFF; border-left: 0; border-right: 0;"&gt;
                              &lt;td&gt;
                                  &lt;table width="90%" cellspacing="0" cellpadding="0" border="0" style="max-width: 580px; margin: 20px auto;"&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td width="49%;" style="width: 49%;"&gt;
                                                  &lt;div style="padding-right: 9px; padding-bottom: 18px;"&gt;
                                                      &lt;a href="http://www.ussportscamps.com/tennis/" target="_blank" style=" text-decoration: none;"&gt;
                                                          &lt;img src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/aee9ab4d-d626-43c0-924a-2808c3bf32f7.jpg" style="display: block; width: 100%; max-width: 264px; margin:0;"&gt;
                                                          &lt;div style="margin: 0; padding: 7px; border-bottom: 3px solid #d4d9dd; color: #FFFFFF;font-family: Helvetica;font-size: 12px;font-weight: normal;text-align: left; text-transform: uppercase; background-color: #e97526;"&gt;&lt;span&gt;Tennis Camps&lt;/span&gt;
                                                          &lt;/div&gt;
                                                      &lt;/a&gt;
                                                  &lt;/div&gt;    
                                              &lt;/td&gt;
                                              &lt;td width="49%;" style="width: 49%;"&gt;
                                                  &lt;div style="padding-left: 9px; padding-bottom: 18px;"&gt;
                                                      &lt;a href="http://www.ussportscamps.com/tennis/" target="_blank" style=" text-decoration: none;"&gt;
                                                          &lt;img src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/aee9ab4d-d626-43c0-924a-2808c3bf32f7.jpg" style="display: block; width: 100%; max-width: 264px; margin:0;"&gt;
                                                          &lt;div style="margin: 0; padding: 7px; border-bottom: 3px solid #d4d9dd; color: #FFFFFF;font-family: Helvetica;font-size: 12px;font-weight: normal;text-align: left; text-transform: uppercase; background-color: #e97526;"&gt;&lt;span&gt;Tennis Camps&lt;/span&gt;
                                                          &lt;/div&gt;
                                                      &lt;/a&gt;
                                                  &lt;/div&gt;    
                                              &lt;/td&gt;    
                                          &lt;/tr&gt;
                                          &lt;tr&gt;
                                              &lt;td width="49%;" style="width: 49%;"&gt;
                                                  &lt;div style="padding-right: 9px; padding-bottom: 18px;"&gt;
                                                      &lt;a href="#" target="_blank" style=" text-decoration: none;"&gt;
                                                          &lt;img src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/aee9ab4d-d626-43c0-924a-2808c3bf32f7.jpg" style="display: block; width: 100%; max-width: 264px; margin:0;"&gt;
                                                          &lt;div style="margin: 0; padding: 7px; border-bottom: 3px solid #d4d9dd; color: #FFFFFF;font-family: Helvetica;font-size: 12px;font-weight: normal;text-align: left; text-transform: uppercase; background-color: #e97526;"&gt;&lt;span&gt;Tennis Camps&lt;/span&gt;
                                                          &lt;/div&gt;
                                                      &lt;/a&gt;
                                                  &lt;/div&gt;    
                                              &lt;/td&gt;
                                              &lt;td width="49%;" style="width: 49%;"&gt;
                                                  &lt;div style="padding-left: 9px; padding-bottom: 18px;"&gt;
                                                      &lt;a href="#" target="_blank" style=" text-decoration: none;"&gt;
                                                          &lt;img src="https://gallery.mailchimp.com/29e5ee226282df721575ec2a2/images/aee9ab4d-d626-43c0-924a-2808c3bf32f7.jpg" style="display: block; width: 100%; max-width: 264px; margin:0;"&gt;
                                                          &lt;div style="margin: 0; padding: 7px; border-bottom: 3px solid #d4d9dd; color: #FFFFFF;font-family: Helvetica;font-size: 12px;font-weight: normal;text-align: left; text-transform: uppercase; background-color: #e97526;"&gt;&lt;span&gt;Tennis Camps&lt;/span&gt;
                                                          &lt;/div&gt;
                                                      &lt;/a&gt;
                                                  &lt;/div&gt;    
                                              &lt;/td&gt;    
                                          &lt;/tr&gt;
  
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
  
                          &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;!--[if (gte mso 9)|(IE)]&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;![endif]--&gt;
      &lt;/div&gt;
  &lt;/center&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>