<div class='author'>
  <h1 >Charles Bukowski</h1>
  <h2>Women</h2>
 </div>
  <div class="container"> 
  <div class='cover'>
    <figure class='front'>
      <img src='https://images-na.ssl-images-amazon.com/images/I/71FCRKNUxML.jpg'/>
    </figure>
     <figure class='back'>
       <img src='https://www.hankbukowski.com/wp-content/uploads/2013/03/chinaski_drinking.jpg'/>
     </figure>
  </div>
  </div>

@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@300&display=swap');

*{
  margin: 0;
  padding: 0;
}

html, body{
  width: 100%;
  height: 100%;
  background-color: #eddcd2;
}

.container{
  width: 250px;
  height: 350px;
  background: url('https://4061b388c48358dc7139-15a98bbe77f8c9caf5324f3866115857.ssl.cf1.rackcdn.com/poem1992-00-00-the-riots.jpg');
  background-size: 212px 350px;
  background-repeat: no-repeat;
  
  backgorund-position: 30px 30px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
}

.cover{
  width: 225px;
  height: 100%;
  position: absolute;
 
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transform-origin: left;
  transition: all .3s ease-in;
}

.container:hover .cover {
  transform: rotateY(-180deg);
}

figure{
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  img{
    width:100%;
    height:100%;
  }
}

figure.front{
  background-color: green;
}

figure.back{
  background-color: green;
  transform: rotateY(180deg)
}

.author{
  width: 250px;
  height: 50px;
  position: relative;
  left: 50%;
  top: 30%;
  transform: translate(-50%,-90%);
 font-size: 120%;
  
}


@media only screen and(max-height:1000px){
  .author{
    padding: 10px;
    font-size: 80%;
  }
}

@media only screen and(max-height:600px){
  .author{
    padding: 20px;
    font-size: 60%;
  }
}