ホバー切り替え

HTML

---

<div class="mouseover_div">

<img alt="" class="mouseover_inner" src="https://img.wiki3.jp/nordic/img-after.png" />

<img alt="" class="mouseover_outer" src="https://img.wiki3.jp/nordic/img-before.png" />

</div>

 

CSS

---

.mouseover_div{
  position: relative;
}
.mouseover_outer{
 z-index:1;
 position:relative;
  -moz-opacity: 0;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.mouseover_inner{
 z-index:0;
 position: absolute;
 left: 0px;
 top:0px;
}
.mouseover_outer:hover{
  opacity: 0;
}

z-index:1は常に1枚目を上に表示するための設定です。(z-index:0は念のため)
Transitionでゆっくり切り替えにしてますが、パッと切り替えることも可能です
Divは位置調整用です