<div id="showing" class="display-in-blocs-edit-mode-only remove-on-export" width="100%" height="100%">
  <img class="pre_face" src="img/placeholder-image.png"  alt="face">
  <img class ="pre_hover" src="img/placeholder-image.png"  alt="hover">
  <style>
  .showing{
      width: 100%;
      height: 100%;
    }
    .showing::after{
      top:0;
  }
  .pre_face{
      position:absolute;
      width: 100%;
      height: 100%;
      -webkit-clip-path:inset(0 50% 0 0);
  }
  .pre_hover{
    width: 100%;
      height:100%;
  }
  </style>
<div>