<div class="hotel_item">
  <figure class="hotel_img"><img src="http://bit.ly/2Kzvg9E" alt=""></figure>
  <h2 class="hotel_name">hogehoge hotel</h2>
  <div class="hotel_txt">説明テキスト説明テキスト説明テキスト説明テキスト説明テキスト</div>
  <div class="hotel_book">
    <a href="https://www.google.com/" target="_blank" class="hotel_btn-book">予約する</a>
  </div>
  <a href="https://nanimonaikedo.jp" target="_blank" class="hotel_detail"></a>
</div>
body{
  background: #eee;
  line-height:1.6;
}
.hotel{
  &_item{
    margin:20px auto;
    color: #333;
    background: #fff;
    border-radius: 10px;
    overflow:hidden;
    width: 250px;
    position: relative;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  }
  &_img{
    margin-bottom: 5px;
    img{
      width: 100%;
    }
  }
  &_name,
  &_txt,
  &_book{
    margin:0 20px; 
  }
  &_name{
    font-size: 20px;
  }
  &_txt{
    color: #8c8c8c;
    font-size: 12px;
    margin-bottom:10px;
  }
  &_book{
    overflow: hidden;
    margin-bottom: 25px;
  }
  &_btn-book{
    text-decoration: none;
    display: inline-block;
    padding:5px 10px;
    background: #3aae73;
    text-align: center;
    color: #fff;
    font-size: 12px;
    float: right;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
  }
  &_detail{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.