マウスが乗っている要素のみに詳細情報を表示する

・html
<div class="blog">

  <div class="post">
    <div class="post-info">
      <div class="post-date">2017.8.17</div>
      <h3 class="post-title">記事のタイトル1</h3>
    </div>
  </div>
  <!--
  -->
  <div class="post">
    <div class="post-info">
      <div class="post-date">2017.9.24</div>
      <h3 class="post-title">記事のタイトル2</h3>
    </div>
  </div>

</div>
・css
.blog{
  width: 640px;
}

.post{
  width: 50%;
  height: 240px;
  background-color: #075470;
  display: inline-block;
  position: relative;
  border-left: 1px solid #092852;
  box-sizing: border-box;
}

.post:hover .post-info{
  display: block;
}

.post-info{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  display: none;
}

.post-date{
  font-size: 14px;
}

.post-info h3{
  margin: 0
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です