画像透過+ グラデーション＋テキスト

<!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";

/*　画像の透過+グラデーション＋テキスト出現　*/

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

.opacityText span.mask {
  position: relative; /*グラデーションの基点となる位置を定義*/
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block; /*画像をくくるspanタグをブロック要素にする*/
  line-height: 0; /*行の高さを0にする*/
}

.opacityText:hover span.mask::before {
  /*hoverした時の変化*/
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(88, 182, 211, 0.6),
    rgba(229, 93, 135, 0.6)
  ); /*背景色（グラデーション）*/
}

.opacityText img {
  opacity: 1;
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.opacityText:hover img {
  /*hoverした時の変化*/
  opacity: 0.5; /*透過具合を変更したい場合はこの数値を変更*/
}

.opacityText 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にする*/
}

.opacityText: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;
}

/*　横幅　*/

.opacityText {
  width: 70%;
  margin: 0 auto; /*中央揃え*/
}</style>
</head>
<body>
<body>
<div class="opacityText">
<a href="#">
<span class="mask">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/26.jpg" alt="">
<span class="cap">画像透過＋グラデーション＋テキストが出現 OpacityText</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";

/*　画像の透過+グラデーション＋テキスト出現　*/

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

.opacityText span.mask {
  position: relative; /*グラデーションの基点となる位置を定義*/
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
  display: block; /*画像をくくるspanタグをブロック要素にする*/
  line-height: 0; /*行の高さを0にする*/
}

.opacityText:hover span.mask::before {
  /*hoverした時の変化*/
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(88, 182, 211, 0.6),
    rgba(229, 93, 135, 0.6)
  ); /*背景色（グラデーション）*/
}

.opacityText img {
  opacity: 1;
  transition: 0.3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.opacityText:hover img {
  /*hoverした時の変化*/
  opacity: 0.5; /*透過具合を変更したい場合はこの数値を変更*/
}

.opacityText 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にする*/
}

.opacityText: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;
}

/*　横幅　*/

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