title: Transition on toggle between two images
body: <p>I have a <code>div</code> element that contains two images. Using CSS <code>:hover</code>, I toggle the display of the two images (FontAwesome icons)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="alternating-content-item-content alternating-content-item__content col-md-6"&gt;
    &lt;div class="alternating-content-item-content__padding"&gt;
      &lt;h3 class="alternating-content-item-content__heading"&gt;Trading&lt;/h3&gt;
      &lt;p class="alternating-content-item-content__blurb"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/p&gt;
      &lt;a href="http://www.google.com" target="_blank" class="alternating-content-item-content__link"&gt;
        Read More
        &lt;i class="fa fa-chevron-right fa-hover-hidden read-more-icon"&gt;&lt;/i&gt;
        &lt;i class="fa fa-arrow-right fa-hover-show read-more-icon"&gt;&lt;/i&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS is</p>
  
  <pre class="lang-css prettyprint-override"><code>.fa.fa-hover-show {
      display: none;
  }
  
  &amp;:hover {
      .fa.fa-hover-hidden {
          display: none;
      }
  
      .fa.fa-hover-show {
          display: inline-block;
      }
  }
  </code></pre>
  
  <p>How can I add the transition/transformation to the div hover event to make a smooth animation between the two fa icons?</p>