<div class="box">
  <div class="a"></div>
  <img src="https://assets.codepen.io/1480814/1015-800x800.jpg" width="200" height="200">
</div>

.box {
  display: inline-grid;
  border: 2px solid;
}
.a {
  grid-area: 1/1;
  width: 0%;
  background: red;
  transition: 0s .2s;
}
.box:active .a{
  width: 100%;
  transition: 0s;
}
img {
  grid-area: 1/1;
  transform: translate(200%);
  transition: 999s 999s;
}
.a:hover + img {
  transform: translate(0);
  transition: 0s;
}