试图通过幻灯片响应来获取文本

Question

我试图通过幻灯片响应来获取文本“Wing Me Up”，因此它会根据图像调整大小，我已经尝试取出这个位置：绝对;似乎没有任何工作。我不想在我的HTML中使用任何内联样式，只需要纯CSS。

h1 {
  font-family: 'Gloria Hallelujah', cursive;
  color: #fff;
  position: absolute;
  font-size: 2em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 60px;
  -webkit-transform: rotate(-7deg);
  -moz-transform: rotate(-7deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
  /*For IE support*/
}

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="img/wings.png" style="width:100%">
    <h1>Wing me up</h1>
  </div>
</div>