画像縮小（ぼかし）＋テキスト

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<style>@charset "utf-8";

/*　画像の縮小＋テキスト出現　*/

.zoomOutText {
  /*背景色とテキストの基点となる位置を定義*/
  position: relative;
}

.zoomOutText span.mask {
  position: relative;
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block; /*画像をくくるspanタグをブロック要素にする*/
  line-height: 0; /*行の高さを0にする*/
  overflow: hidden; /*拡大してはみ出る要素を隠す*/
}

.zoomOutText:hover span.mask::before {
  /*hoverした時の変化*/
  content: "";
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: rgba(0, 0, 0, 0.5); /*背景色*/
}

.zoomOutText img {
  transform: scale(1.2);
  filter: blur(0);
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomOutText:hover img {
  /*hoverした時の変化*/
  transform: scale(1); /*縮小の値を変更したい場合はこの数値を変更*/
  filter: blur(2px); /*ぼかし具合を変更したい場合はこの数値を変更*/
}

.zoomOutText span.cap {
  opacity: 0;
  transition: 0.5s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
  position: absolute;
  z-index: 3; /*テキストを前面に出す*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; /*テキストの色を変えたい場合はここを修正*/
  line-height: 1.5; /*行の高さを1.5にする*/
}

.zoomOutText:hover span.cap {
  /*hoverした時の変化*/
  opacity: 1;
  text-shadow: 1px 1px 2px #000;
}

/*========= レイアウトのためのCSS ===============*/

a {
  color: #333;
  text-decoration: none;
}

.lead {
  text-align: center;
  padding: 50px 20px;
}

/*画像のレスポンシブ*/

img {
  width: 100%;
  height: auto;
}

/*　横幅　*/

.zoomOutText {
  width: 70%;
  margin: 0 auto; /*中央揃え*/
}</style>
</head>
<body>
<body>
<div class="zoomOutText">
<a href="#">
<span class="mask">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/blue-eye.jpg" alt="">
<span class="cap">画像縮小（ぼかし）＋テキストが出現 ZoomOutText</span>
</span>
</a>
</div>
<script>
</script>
</body>
</html>

/* 
   外部依存 CSS:
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
 */

@charset "utf-8";

/*　画像の縮小＋テキスト出現　*/

.zoomOutText {
  /*背景色とテキストの基点となる位置を定義*/
  position: relative;
}

.zoomOutText span.mask {
  position: relative;
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block; /*画像をくくるspanタグをブロック要素にする*/
  line-height: 0; /*行の高さを0にする*/
  overflow: hidden; /*拡大してはみ出る要素を隠す*/
}

.zoomOutText:hover span.mask::before {
  /*hoverした時の変化*/
  content: "";
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: rgba(0, 0, 0, 0.5); /*背景色*/
}

.zoomOutText img {
  transform: scale(1.2);
  filter: blur(0);
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomOutText:hover img {
  /*hoverした時の変化*/
  transform: scale(1); /*縮小の値を変更したい場合はこの数値を変更*/
  filter: blur(2px); /*ぼかし具合を変更したい場合はこの数値を変更*/
}

.zoomOutText span.cap {
  opacity: 0;
  transition: 0.5s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
  position: absolute;
  z-index: 3; /*テキストを前面に出す*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; /*テキストの色を変えたい場合はここを修正*/
  line-height: 1.5; /*行の高さを1.5にする*/
}

.zoomOutText:hover span.cap {
  /*hoverした時の変化*/
  opacity: 1;
  text-shadow: 1px 1px 2px #000;
}

/*========= レイアウトのためのCSS ===============*/

a {
  color: #333;
  text-decoration: none;
}

.lead {
  text-align: center;
  padding: 50px 20px;
}

/*画像のレスポンシブ*/

img {
  width: 100%;
  height: auto;
}

/*　横幅　*/

.zoomOutText {
  width: 70%;
  margin: 0 auto; /*中央揃え*/
}