<div id="wrapper">
  <span id="tall-ghost">&nbsp;</span>
  <img class="not-a-ghost" src="https://placekitten.com/300/160" />
</div>

#wrapper {
  width: 400px;
  height: 200px;
  background-color: #3B3B98;
  text-align: center;
}

#tall-ghost {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  
  transition-delay: 0s;
  transition-duration: 500ms;
  transition-property: all;
  transition-timing-function: ease-in-out;
}
#tall-ghost.undead {
  width: 20px;
  background-color: #D6A2E8;
}

.not-a-ghost {
  display: inline-block;
  vertical-align: middle;
}

setInterval(function() {
  const tallGhost=document.getElementById('tall-ghost');
  if (!tallGhost.classList.contains('undead')) {
    tallGhost.classList.add('undead');
  } else {
    tallGhost.classList.remove('undead');
  }
}, 2500);