hoverで画像が浮き出る！filter＆scale効果100%のCSSアニメーション【解説あり】

<div class="pic-background">
  <div class="pic">
    <b-img src="https://source.unsplash.com/1000x802" fluid alt="Fluid image"></b-img>
  </div>
  <div class="pic">
    <b-img src="https://source.unsplash.com/1000x801" fluid alt="Fluid image"></b-img>
  </div>
  <div class="pic">
    <b-img src="https://source.unsplash.com/1000x800" fluid alt="Fluid image"></b-img>
  </div>
  <div class="pic">
    <b-img src="https://source.unsplash.com/1000x803" fluid alt="Fluid image"></b-img>
  </div>
  <div class="pic">
    <b-img src="https://source.unsplash.com/1000x804" fluid alt="Fluid image"></b-img>
  </div>
  <div class="pic">
    <b-img src="https://source.unsplash.com/1000x805" fluid alt="Fluid image"></b-img>
  </div>
</div>

body{
  background:#f1f1f1;
  font-family: 'Inconsolata', monospace;
  font-weight:bold;
  color:gray;
  text-align:center;
  -webkit-font-smoothing: antialiased;
}
.pic-background{
  align-items:center;
  justify-content:center;
  margin-left: 50px;
  margin-top: 50px;
  width:100%;
}
/* 画像自体の調整 */
.pic img {
  width:100%;
  height: 100%;
}
/* 画像の外枠の調整 */
.pic{
  float: left;
  margin:0%;
  background:white;
  width:29%;
  height:250px;
  border:1px solid #d6d6d6;
  box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、ぼかしの広さ、色） */
  transition: 0.3s;
  /* スライド時にかかる時間を0.3秒に指定 */
}
.pic-background:hover .pic{
  filter:blur(3px);
  /* hover前：filterプロパティの「ぼかし」を調整 */
  opacity:.5;
  /* 透明度を調整 */
  transform: scale(.98);
  /* 収縮率を指定 */
  box-shadow:none;
}
.pic-background:hover .pic:hover{
  transform:scale(1);
  /* 収縮率を指定 */
  filter:blur(0px);
  /* hover後：filterプロパティの「ぼかし」を調整 */
  opacity:1;
  /* 透明度を調整 */
  box-shadow:0 8px 20px 0px rgba(0,0,0,0.125);
}