CodePen

HTML

            
              <figure id="feature">
  <img src="http://lorempixel.com/900/500/people/4" alt="" />
  <figcaption>
    <h3>Title Here</h3>
    <p>Lorem Ipsum Dalor Amet. Lorem Ipsum Dalor Amet. Lorem Ipsum Dalor Amet.</p>
    <p class="author">Name</p>
  </figcaption>
</figure>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              #feature {
  margin: 20px auto;
  width: 900px;
  position: relative;
  font-family: sans-serif;
}

#feature figcaption{
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  background: #bada55;
  padding: 20px;
}

#feature h3 {
  font-size: 2em;
  margin: 0;
}

#feature p {
  font-size: 1.5em;
  margin: 0.5em;
}

.author {
  text-align: right;
  padding-right: 20px;
  font-family: cursive;
}

.author:before {
  content: "~ ";
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................