マウスオーバーで画像を切り替える

HTML

<div class="mouse-over">
  <img src="" alt="">
  <img src="" alt="" class="active">
</div>

CSS

.mouse-over {
	position: relative;
}
.mouse-over .active {
	position: absolute;
	left:0;
	top: 0;
	opacity: 0;
	transition: 0.5s;
}
.mouse-over:hover .active {
	opacity: 1;
}

※参考にしたサイト

https://www.torat.jp/css-hover-design/