带标题和链接的Rsponsive缩略图

Question

你好我怎么能在这张照片中做出类似的东西：

example

我尝试使用bootstrap网格，但我总是在角落周围有一个框架。

Answer 1

.image-block {
  position: relative;
  display: inline-block;
  width: 200px;
  text-decoration: none;
  color: #000;
  box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
  margin: 20px;
  transition: box-shadow .3s ease-in-out;
  will-change: box-shadow;
}
.image-block:hover {
  box-shadow: 0 0 4px 0 rgba(0,0,0,.2);
}
.image-block figure {
  margin: 0;
}
.image-block figure img {
  width: 100%;
}
.image-block figcaption {
  padding: 15px;
}
.image-block figcaption .date {
  font-size: 12px;
  color: #999;
}
.image-block figcaption .message {
  font-size: 16px;
}
.image-block figcaption .message p {
  margin: 0;
}
.image-block footer {
  background-color: purple;
  color: #FFF;
  font-size: 14px;
}
.image-block footer p {
  margin: 0;
  padding: 7px 15px;
}

<a href="#" class="image-block">
  <figure>
    <img src="https://static.pexels.com/photos/324658/pexels-photo-324658.jpeg">
  </figure>
  <figcaption>
    <span class="date">4/07/2017</span>
    <div class="message">
      <p>Lorem ipsum dolor sit amer</p>
    </div>
  </figcaption>
  <footer>
    <p>Read more</p>
  </footer>
</a>