index.html

<div id="pommes" class="mayo ketchup">
  
  <div class="bildueberschrift">ueberschrift</div>
  
  <!-- http://www.khaosok-treehouse.com/images/tours/tubing%20sok%20river%20tree%20house%205.jpg -->

  
  <p class="unterschrift">
    das ist ein abschnitt
  </p>
  
</div>

myPxYP.markdown

myPxYP

A Pen by Captain Anonymous on CodePen.

License.

style.css

#pommes {
  opacity: 0.8;
  color: #fff;
  letter-spacing: 5px;
  transition: 0.5s ease-in;
  background: transparent;
  width: 400px;
  height: 300px;
  background: url(http://www.khaosok-treehouse.com/images/tours/tubing%20sok%20river%20tree%20house%205.jpg);
  text-align: center;
}

#pommes .bildueberschrift{
  font-size: 12pt;
  transition: 0.5s ease-in;
  position: relative;
  top: 40%;
  left:10px;
  padding:0;
  
  
}

#pommes:hover .bildueberschrift {
  font-size: 30pt;
    text-shadow: 9px 9px 9px #000;
}


#pommes .unterschrift {
  position: relative;
  padding-left: 8px;
  top: 52%;
  opacity:0;
  transition: 1.2s ease-in;
}

#pommes:hover .unterschrift {
  opacity:1;
  font-size: 156%;
  text-shadow: 3px 3px 4px #000;
  top: 48%;
  
}