2つの画像の切り替え時の切り替え

Question

2つの画像を含むdiv要素があります。 CSS :hoverを使用して、私は私のCSSは、私はスムーズにするためにdivのホバーイベントへの移行/変換を追加することができますどのように

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

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

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

ある二つの画像（FontAwesomeアイコン）

<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> 

の表示を切り替えます2つのFAアイコン間のアニメーション？

Answer 1

スムーズなアニメーションが必要な場合は、opacityを使用してください。例：

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 
    } 
}