애니메이션 질문입니다

[심현석]

overlay 를 hover 하면 opacity를 1 로  / img 를 hover 하면 img scale 을 1.2 로 변경되게 하는 애니메이션 코드를 작성했는데 overlay 영역이 img 영역을 
가리고 있어서 img hover 가 되지 않는데 해결방법이 궁금합니다.

[codingapple]

news_overlay 박스에도 :hover시 transform 똑같이 줘봅시다

[심현석]

transform 속성을 적용시켜본 결과 img 가 확대 안되고 overlay 박스가 확대되어 글자가 커져 화면밖으로 나가게 됩니다 ㅠ

[codingapple]

news_overlay 박스를 img태그보다 이전에 놓고 
news_overlay:hover+img { } 이런 식으로 요소선택해서 애니메이션 줘야할듯요

[심현석]

.news_list .overlay {
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.4);
 top: 0;
 position: absolute;
 opacity: 0;
 transition: all 1s;
}
.news_list .overlay:hover {
 opacity: 1;
}
.news_list img {
 transition: all 1s;
}
.news_list .overlay:hover + img {
 width: 100%;
 height: 100%;
 transform: scale(1.2);
}




<div class="news_list">
 <div class="overlay"></div>
 < img src="./images/news2.png" alt="" />
 </div>


이런식으로 해봤는데 작동하지 않습니다 .. 오버레이가 이미지를 가리다보니 이미지에 hover을 할 수 없는 것 같습니다 

[codingapple]

transform 주면 앞뒤 배치순서가 이상해져서 
transform말고 width같은거 가지고 애니메이션 줍시다

[글쓴이]

글