어떻게 전환 효과를 만들 수 있습니까

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