css 相框 + hover 顯示文字

css

.imgWrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin: 10px;

  .bg1 {
    position: absolute;
    right: -3px;
    bottom: -3px;
    background-color: #E3E3E3;
    width: 100%;
    height: 100%;
    z-index: 91;
  }

  .bg2 {
    position: absolute;
    left: -3px;
    top: -3px;
    background-color: #fff;
    width: 100%;
    height: 100%;
    border: 1px solid #E3E3E3;
    z-index: 92;
  }

  .imgDiv {
    width: 95%;
    height: 95%;
    position: relative;
    z-index: 98;
  }
}

div.post-photo {
  background-size: 100% 100%;
  height: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border: 3px solid #fff;

  .post-content{
      width: 100%;
      height: 200px;
      opacity:0;
      background: #FFF;
  }

  &:hover .post-content{
           opacity:0.5;
           text-align:justify;
           color:#000000;
           font-size:20px;
           font-weight:700;
           font-family:"Times New Roman", Times, serif;
  }
}

html

<div class="postPhoto">
  <div class="imgWrap">
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="imgDiv">
      <div>
        <a href="http://localhost:3000/posts/29">
          <div class="post-photo" style="background-image: url(/uploads/post/image/29/london_2423609b.jpg)">
            <div class="post-content">
 要感受英國的魅力，必要到首都倫敦看一下了。倫敦是一個多元化的文化搖籃，約有 700 萬人口，來自 40 個不同的民族。泰晤士河將倫敦大致分為北區和南區，小倫敦（The C..
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>