无法设置渐变div上的过渡，但无法设置图片的不透明度，因为它也设置了子元素的不透明度

Question

我正在尝试在图像上使用渐变背景进行漂亮的悬停过渡。问题是我无法在渐变背景上进行过渡。因此，我将其移动到图像的后面而不是顶部，并在悬停时设置了图像的不透明度。但是，由于H2是图像div的子代，因此现在H2不能很好地显示。

https://jsfiddle.net/landon1013/b0L6yx25/2/

HTML

mTextView.setText(Html.fromHtml(getString(R.string.pattern_hello, "null")))); //Html.fromHtml (String) - deprecated;

SCSS

<div class="gradient">
  <div class="image">
    <h2>
      Jake Brown
    </h2>
  </div>
</div>