Swan Lake

<style>
@import url('https://fonts.googleapis.com/css?family=Pompiere|Arizonia');

.swannieBase {
  box-sizing: border-box;
  height: auto;
  width: 75%;
  max-width: 550px;
  min-width: 200px;
  background: linear-gradient(to right top, #16222A, #3A6073);
  background: url("https://via.placeholder.com/500x500/16222A");
  background-position: center center;
  background-size: cover;
  border: #21353A .15rem solid;
  font-size: 16px;
  margin: 0 auto .90rem; 
  padding: 1rem .75rem 1.5rem;
  overflow: hidden;
}

.swannieTextie {
  display: none;
  height: auto;
  width: auto;
  background-color: rgba(19, 56, 68, .90);  
  padding: .2rem .5rem;
  border: 5px double #CDD0DA;
  font: 16px "Pompiere";
  color: white;
}

.swannieWriter {
  height: auto;
  width: 100%;
  background-color: transparent;
  visibility: visible;
  transition: transform 5s ease-in-out;
  transition-duration: 5s;
}

.swannieWriterGif img {
  display: block;
  margin: 2rem auto;
  height: auto;
  width: 100%;
  max-width: 300px;
  background-color: black;
  box-shadow: 1.5px 1.5px 2px #5e6566;
}

.swannieWriterQuote {
 display: block;
 font: 30px "Arizonia"; 
 text-align: center;
 color: white;
 text-shadow: 3px 0 1px #5e6566;
 padding-top: 15rem;
}

.swanniecredit a {
  font: 15px "Pompiere";
  text-decoration: none;
  color: white;
  position: relative;
  display: block;
  float: right;
  margin: 0;
}

.swannieBase:hover .swannieTextie {
  display: block;
}

.swannieBase:hover .swannieWriter {
  display:none;
}

@media only screen and (max-width: 768px) {
 .swannieWriter {
       display:none;
    } 
 .swannieTextie {
       display:block;
    } 
}
</style>

<div class="swannieBase">
    <div class="swannieWriter">
      <div class="swannieWriterGif"><img src="https://via.placeholder.com/500x350"></div>
      <div class="swannieWriterQuote">'Put song lyrics or a quote here. Doesn't look bad if it spans two lines.'</div>
        
      </div>
  <div class="swannieTextie">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec eros faucibus, 
          venenatis massa et, pretium diam. Maecenas porta sit amet erat non eleifend. In lobortis 
          accumsan justo et semper. Mauris ornare bibendum lectus eu dapibus. Lorem ipsum dolor sit 
          amet, consectetur adipiscing elit. Duis in lorem urna. Sed commodo nisl turpis, eget iaculis
          metus porta non. Integer ullamcorper enim massa, quis porta arcu sagittis vel.</p>
      <p>Sed dictum sit amet dui sit amet sollicitudin. Phasellus fermentum, nulla eget tincidunt
        lacinia, arcu justo imperdiet ex, accumsan dictum elit metus sit amet mi. Maecenas vel sem 
        rhoncus, luctus lacus sed, volutpat enim. Vivamus malesuada quam at tellus commodo congue. 
        Curabitur vel elit at nibh vulputate malesuada rutrum sed ante. Morbi malesuada, lacus et 
        dapibus auctor, nulla nisl imperdiet lacus, vel viverra justo ex vitae lorem. Proin vulputate
        egestas augue quis facilisis. Vestibulum luctus dui in sollicitudin ullamcorper. Nulla ut 
        ultricies ligula, nec pellentesque elit. In vitae nibh mattis, posuere magna a, tincidunt 
        nunc. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada 
        fames ac turpis egestas. Donec faucibus tortor in viverra iaculis. Proin tortor ipsum, porta
        nec ultricies at, mattis nec massa. Ut egestas nisi nec eros accumsan imperdiet ac eget 
        lacus. Vestibulum egestas sapien at accumsan lacinia.</p>
      <p>Vestibulum quis posuere ipsum, sit amet cursus magna. Nulla vitae molestie augue. Ut
        maximus hendrerit neque, eget dictum mi fringilla id. Sed eleifend nisi libero, ut tempus 
        erat volutpat eget. Mauris non sem dui. Sed id mauris non eros laoreet fermentum. Aenean 
        luctus mauris ligula, eget commodo nunc congue vel. Nam mollis, turpis ut accumsan ornare,
        mi mauris rutrum magna, a maximus leo elit sed erat. Nulla hendrerit dolor vel nisi semper
        varius.</p>
      <p>Duis ante nunc, pellentesque eget odio eu, fermentum ultricies ipsum. Sed arcu nisi, 
        viverra porta erat eget, luctus porttitor odio. Quisque scelerisque urna mauris, vitae 
        placerat risus consequat at. Proin pellentesque libero lectus, sed ultrices tellus porttitor
        accumsan. Fusce placerat molestie elit, et volutpat dui luctus venenatis. Lorem ipsum dolor
        sit amet, consectetur adipiscing elit. Fusce non volutpat augue, non tristique arcu. Lorem 
        ipsum dolor sit amet, consectetur adipiscing elit. </p>
    </div>
  <div class="swanniecredit"><a href=https://rpginitiative.com/profile/1870-jones/>©</a></div>
</div>