불투명도가 다른 이미지를 표시하는 CSS 위로 가져온 이미지

Question

처음에는 이미지 1의 불투명도가 낮 으면서 이미지 2는 불투명도가없고, 원하는 것은 이미지 2와 1을 이미지 위에 올려 놓으면 전체 불투명도로 표시되게하는 것입니다. 1.하지만 난 그들 모두 그렇게 표시 나는이 일을하거나 CSS 날 how.``에게 더 좋은 방법이 있다면 누군가가 알고 희망을 만드는 방법을 알고하지 않습니다

.img1 { 
    height:120px; 
    width:120px; 
    position:fixed; 
    bottom:0px; 
    right:-20px; 
     opacity: 0.1; 
    } 
img:hover { 
     opacity: 1.0; 
    } 
.img2{ 
     opacity: 0; 
    position:fixed; 
    right:50px; 
    bottom:70px; 
    } 

HTML :

<img src="img1.png" class="img1"> 
    <img src="img2.png" class="img2"> 

그래서 내가 원하는 것은 이미지 1 위로 마우스를 가져 가면 이미지 2와 1이 완전히 불투명 해 보여서 누군가가 나를 도와 줄 수 있기를 바랍니다. 감사합니다.

Answer 1

당신은 사용할 수 있습니다 +, Adjacent sibling combinator or ~, General sibling combinator

.img1:hover ~ .img2 , .img1:hover { 
    opacity: 1.0; 
} 

또는

.img1:hover + .img2 , .img1:hover { 
    opacity: 1.0; 
}