Anwser of http://www.zhihu.com/question/28542816

Anwser-of-http:--www.zhihu.com-question-28542816.markdown

Anwser of http://www.zhihu.com/question/28542816

Forked from Captain Anonymous's Pen JoBVYX.

A Pen by Aztack on CodePen.

License.

index.html

<div class="places">
  <div class="container" style="float:left">
    <div style="height:100%;">
      <span><h5>THE MOST ROMANTIC GETAWAY</h5>Blessed with dreamy beaches, pounding surf, luxurious spas and swanky restaurants, it’s easy to see why thousands flock to Indonesia’s tourist mecca every year. </span>
      <img src="http://dy16nbwd8h3eh.cloudfront.net/Web/assets/img/banner3.jpg" alt="" />
    </div>
    <div>
      <b>Seoul</b>
      <img src="http://dyt5fqgc4jagm.cloudfront.net/upload/img410X250/be169c75-Seoul.jpg" alt="" />
    </div>
    <div>
      <b>Singapore</b>
      <img src="http://dyt5fqgc4jagm.cloudfront.net/upload/img410X250/f071b8d3-bba6-4218-8cce-1da665b2117c.jpg" alt="" />
    </div>
    <div>
      <b>Macao</b>
      <img src="http://dyt5fqgc4jagm.cloudfront.net/upload/img410X250/2c24c358-2e7c-42d7-869d-fff9d29549d7.jpg" alt="" />
    </div>
    <div>
      <b>Phuket</b>
      <img src="http://dyt5fqgc4jagm.cloudfront.net/upload/img410X250/b948e00a-phuket.jpg" alt="" />
    </div>
  </div>
</div>

style.scss

.container {
  font-family:Tahoma;
  display:flex;
  flex-wrap: wrap;
  height: 400px;
  width: 600px;
  flex-direction: column;
  font-size: 12px;
  
  span{
    color:white;
    position: absolute;
    z-index:1;
    margin: 10px;
    bottom: 1em;
  }
  b{
    position: absolute;
    z-index: 1;
    color: white;
    font-size: 18px;
    width: 100%;
    text-align: center;
    margin-top: 50%;
    transform: translateY(-50%);
  }
  div {
    border-radius: 8px;
    box-sizing: border-box;
    display:flex;
    border: 4px solid transparent;
    background-clip:padding-box;
    height: 50%;
    position: relative;
    overflow: hidden;
    flex-grow:1;
    img {
      position: absolute;
    }
  }
}