JSFiddle - React, Tailwind, and code Playground

HTML

<div id="phone">
  How it should look like
  <div id="dialog">
    <div id="image">
    </div>
  </div>
</div>

<div id="phone">
  How it currently is
  <div id="dialog" style="overflow: hidden">
    <div id="image">
    </div>
  </div>
</div>

CSS

#phone {
  width: 240px;
  height: 400px;
  border: 2px solid black;
  border-radius: 4px;
  background: #aaa;
  position: relative;
  display: inline-block;
  margin-right: 1em;
}

#dialog {
  width: 200px;
  height: 200px;
  background: #fff;
  box-shadow: 0 2px 4px #000;
  position: absolute;
  top: 100px;
  left: 20px;
}

#image {
  width: 36px;
  height: 36px;
  background: blue;
  position: absolute;
  top: -80px;
  left: 20px;
  background: url("http://www.vectorsland.com/imgd/l81233-android-ai-logo-22762.png");
  background-size: 36px;
  animation: sharedelement 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes sharedelement {
  0%, 25% {
    width: 36px;
    height: 36px;
    background-size: 36px;
    top: -80px;
    left: 20px;
  }
  75%, 100% {
    width: 200px;
    height: 200px;
    background-size: 200px;
    top: 0px;
    left: 0px;
  }
}