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

.opacityText span.mask{
  position: relative;/*グラデーションの基点となる位置を定義*/
  transition: .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(180deg, rgba(25, 0, 0, 0.6), rgba(240, 226, 226, 0.6));/*背景色（グラデーション）*/
  


  .original-gradient {
    height: 200px;
    width: 90%;
    background-image: linear-gradient(180deg, rgba(253, 170, 213, 1), rgba(240, 226, 226, 1));
  }
}

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

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

.opacityText span.cap{
  opacity:0;
  transition: .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;
}