body {
  background-color: black;
}
.button{
  margin: 1em;
  display: block;
  text-align: center;
}
img:hover {
  background-color: yellow;
}
img {
  padding: 20px;
  width: auto;
  height: auto;
  max-height: 40vh;
  /* Magic! */
  max-width: 40vw;
}
.wrapper {
  width: 90vw;
  overflow-x: hidden;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.left {
  animation:left 3s linear;
  -moz-animation:left 3s linear; /* Firefox */
  -webkit-animation:left 3s linear; /* Safari and Chrome */       
}
.right {
  animation:right 3s linear;
  -moz-animation:right 3s linear; /* Firefox */
  -webkit-animation:right 3s linear; /* Safari and Chrome */       
}
@keyframes left{
    from {margin-left: -3000px;} 
    to{margin-left:0px;} 
}
@keyframes right{
    from {margin-right: -3000px;} 
    to{margin-right:0px;} 
}