애니메이션 질문입니다

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

.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을 할 수 없는 것 같습니다