どのようにトランジション効果を作ることができます

Question

私はtransition効果のための助けが必要です。私はコードブロックを持っており、ホバーを追加したいのですtransition効果。どうしたらいいですか？

.mockup img { 
 
    cursor: pointer; 
 
} 
 

 
.mockup img:last-child { 
 
    display: none; 
 
} 
 

 
.mockup:hover img:first-child { 
 
    display: none; 
 
} 
 

 
.mockup:hover img:last-child { 
 
    display: inline-block; 
 
}

<div class="row"> 
 
    <div class="col-lg-8 mx-auto mockup"> 
 
    <img src="http://lorempixel.com/output/animals-q-c-640-480-9.jpg"> 
 
    <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg"> 
 
    </div> 
 
</div>

Answer 1

は、残念ながら、あなたは、プロパティを表示するには、トランジションを追加することはできませんが、不透明度や、視認性に置き換えることができ

だからあなたのコードを置き換えることができます。

.mockup img { 
    cursor: pointer; 
    transition: all 0.3s ease; 
} 

.mockup img:last-child { 
    opacity: 0; 
    visibility: hidden; 
} 

.mockup:hover img:first-child { 
    opacity: 0; 
    visibility: hidden; 
} 

.mockup:hover img:last-child { 
    opacity: 1; 
    visibility: visible; 
}