<div class="webpage">
 <div class="hover-message">Pause when hovered!</p>
</div>

body {
  background: #2d97db;
}

.webpage {
  border-radius: 1em;
  border: 2em solid #fff;
  background: #e45763;
  background: #e25865 url(//cssanimation.rocks/screen/images/screen_bg.png) no-repeat top left;
  background-size: 98% auto;
  width: 40em;
  height: 30em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: scroll 5s infinite cubic-bezier(.52, -0.39, .3, 1.43);
}

@keyframes scroll {
  0,
  10% {
    background-position: 0 0;
  }
  20%,
  30% {
    background-position: 0 -22em;
  }
  50%,
  60% {
    background-position: 0 -50em;
  }
  90%,
  100% {
    background-position: 0 0;
  }
}

.hover-message {
  background: rgba(0, 0, 0, 0.5);
  border-radius:0.5em;
  position: absolute;
  top: 4em;
  right: 4em;
  bottom: 4em;
  left: 4em;
  line-height: 6.75em;
  font-size: 2em;
  font-family: sans-serif;
  color: #fff;
  text-align: center;
  opacity:0;
  transition:all 0.2s ease-out;
  transform:translateY(0.8em);
}
.webpage:hover {
  animation-play-state: paused;
}
.webpage:hover .hover-message{
  opacity: 1;
  transform:none;
}