Transition on toggle between two images

Question

I have a div element that contains two images. Using CSS :hover, I toggle the display of the two images (FontAwesome icons)

<div class="alternating-content-item-content alternating-content-item__content col-md-6">
  <div class="alternating-content-item-content__padding">
    <h3 class="alternating-content-item-content__heading">Trading</h3>
    <p class="alternating-content-item-content__blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <a href="http://www.google.com" target="_blank" class="alternating-content-item-content__link">
      Read More
      <i class="fa fa-chevron-right fa-hover-hidden read-more-icon"></i>
      <i class="fa fa-arrow-right fa-hover-show read-more-icon"></i>
    </a>
  </div>
</div>

My CSS is

.fa.fa-hover-show {
    display: none;
}

&:hover {
    .fa.fa-hover-hidden {
        display: none;
    }

    .fa.fa-hover-show {
        display: inline-block;
    }
}

How can I add the transition/transformation to the div hover event to make a smooth animation between the two fa icons?

Transitions/Animations doesn't work on `display` property. Use `opacity` or `visibility` property to show/hide icons. — Mohammad Usman, Nov 03 '17 at 07:33
@MohammadUsman Riiiiight - I see those nested CSS declarations. — UncaughtTypeError, Nov 03 '17 at 07:35

score 0 · Answer 1 · answered Nov 03 '17 at 08:40

If you want a smooth animation you should use opacity. For example:

button {
    transition: opacity 0.5s linear;
}

.fa.fa-hover-show {
    opacity: 0
}

button:hover {
    .fa.fa-hover-hidden {
        opacity: 0
    }

    .fa.fa-hover-show {
        opacity: 1
    }
}

Transition on toggle between two images

1 Answers1