0.7 불투명도의 이미지 2 개 교차 적용

Question

두 장의 사진이 위에 있습니다. 맨 위로 마우스를 가져 가면 1 초 후에 opacity:1에서 opacity:0으로 사라집니다.

기본값으로 opacity:0.7을 갖고 싶습니다. 다른 쪽 위로 마우스를 가져 가면 표시되어야합니다.

내가 겪고있는 문제는 두 이미지가 모두 opacity:0.7으로 표시된다는 것입니다. 분명히 약간 투명하기 때문입니다.

이 방법이 있습니까?

Answer 1

내가 아는 한 기본 이미지 역시 약간 볼 수 있습니다.

는 당신이 필요가있는 무엇과 같이 0으로 첫 번째 이미지의 불투명도를 설정하는 것입니다 :

.img-overlay { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.img-overlay img { 
 
    opacity: .7; 
 
    transition: opacity 1s; 
 
} 
 

 
.img-overlay img:last-child { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    opacity: 0; 
 
} 
 

 
/* Set opacity to 0, ... */ 
 
.img-overlay:hover img { 
 
    opacity: 0; 
 
} 
 

 
/* ... but only for the last image set it to .7 */ 
 
.img-overlay:hover img:last-child { 
 
    opacity: .7; 
 
}

<a href="#" class="img-overlay"> 
 
    <img src="http://pipsum.com/235x110.jpg?1" /> 
 
    <img src="http://pipsum.com/235x110.jpg?2" /> 
 
</a>