<div id="wrap">
  <img src="https://develop.logical-studio.com/wp-content/uploads/2020/04/ドヤロージー.png?logi-before" alt="" class="img-before">
  <img src="https://develop.logical-studio.com/wp-content/uploads/2020/04/クックック笑いロージー.png?logi-after" alt="" class="img-after">
</div>
#wrap{
  width:100px;
  position:relative;
}

img{
  width:100%;
  display:block;
}

.img-after{
  visibility:hidden;
  position:absolute;
  top:0;
  left:0;
}


#wrap:hover .img-before{
  visibility:hidden;
}

#wrap:hover .img-after{
  visibility:visible;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.