カードエフェクト

手順

1. containerを用意する
2. hover時に表示したい要素を用意する
3. hover時に表示する要素のopacityをhoverしていない時：0、hover時：1にする

コード

sample.html

<style>
  .container {
    position:relative;
    display:block;
    width:320px;
    height:320px;
    background-color:#000;
    background-image:url(<picture url>);
    background-size:cover;
    margin: 120px auto;
    border-radius:32px;
    transition: all 0.3s ease-in-out;
  }
  
  .hoverdiv{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    padding:24px;
    background-color: rgba(0,0,0,0.8); 👈 hover時に下の画像が完全に見えなくならないように、少し透明にしておく
    color: #fff;
    opacity:0;　👈 hoverしていないときは完全に透明
    box-sizing:border-box; 👈 要素がはみ出ないようにする
    border-radius:32px;
    transition: all 0.3s ease-in-out;
  }
  
  .container:hover {
    transform: scale(1.03);　👈 hover時に少し拡大表示する
  }
  
  .container:hover .hoverdiv {
    opacity: 1;　👈 hover時に完全に表示する
  }
  
</style>

<div class="container">
<div class="hoverdiv">
<p>text text text</p>
</div>
</div>

参考