title: CSS Transition Scale / Opacity Hover Compatibility
body: <p>I have two images side by side. The goal is when you hover over them, they expand and fade in slowly (while contained in a div). When you mouse out of the hover area, they ease back into their original state. </p>
  
  <p>This works great in Firefox. In Chrome and Safari, when you leave the hover area, the opacity snaps back to .4 instead of easing from 1 to .4 (works perfectly in firefox). Am I missing something?</p>
  
  <p>Edit/ note: The opacity needs to fade in faster than the scaling image.</p>
  
  <pre><code>#img-wrapper {
      width: 1100px;
      margin: 0 auto;
      position: relative;
      height: 550px;
  }
  
  .footer-btn a {
      font-weight: bold;
      line-height: 63px;
      text-decoration: none;
      text-transform: uppercase;
      color: #fff;
  }
  .footer-btn {
      position: absolute;
      z-index: 9000;
      margin-top: 240px;
      -moz-box-sizing: border-box;
      background-color: #000;
      height: 63px;
      width: 400px;
      right: 0;
      left: 0;
      margin-right: auto;
      margin-left: auto;
  }
  .box {
      width: 550px;
      height: 550px;
      text-align: center;
      overflow: hidden;
      float: left;
  }
  .box img {
      width: 556px;
      height: 556px;
      padding: 0px;
      overflow: hidden;
      position: relative;
  
  }
  .footer-box {
      display: table;
      max-height: 550px;
      position: absolute;
      z-index: 9000;
  }
  .footer-box .blog {
      height: 556px;
      -webkit-transition: all 10s, opacity 5s;
      -moz-transition: all 10s, opacity 5s;
      -o-transition: all 10s, opacity 5s;
      -ms-transition: all 10s, opacity 5s;
      transition: all 10s, opacity 5s;
      opacity: .4;
  }
  
  .footer-box:hover .blog {
      cursor: pointer;
      height:556px;
      width: 556px;
      transform:scale(1.15);
      -ms-transform:scale(1.15); /* IE 9 */
      -moz-transform:scale(1.15); /* Firefox */
      -webkit-transform:scale(1.15); /* Safari and Chrome */
      -o-transform:scale(1.15); /* Opera */
      opacity: 0.9;
  }
  
      &lt;div id="img-wrapper"&gt;
          &lt;div class="footer-box"&gt;
              &lt;div class="box"&gt;
                  &lt;div class="footer-btn"&gt;&lt;a class="btn" href=''&gt;Button Text&lt;/a&gt;&lt;/div&gt;
                  &lt;img class="blog" src="images/footer-splash-left.jpg" alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="footer-box" style="right:0px;"&gt;
              &lt;div class="box"&gt;
                  &lt;div class="footer-btn"&gt;&lt;a class="btn" href=''&gt;Button Text&lt;/a&gt;&lt;/div&gt;
                  &lt;img class="blog" src="images/footer-splash-right.jpg" alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>