html - 画像上のテキストを含む透明な div

Question

次の効果を実現したい。(リンク)

アイデアは、画像の上部に透明な div が必要であり、この div に不透明度のテキストを配置したいということです: 1 (非透明)

これまでのところ、divを透明にすることができましたが、その中のすべてのテキストも透明であり、それは望ましくありません。

Answer 1

.image
{
  position: absolute;
  top:200px;
  left:200px;
  z-index: -1;
  height:200px;
  width:200px;
  opacity:.5;

}
.text
{
  position: absolute;
  top:50px;
  left:50px;
  z-index: 1000;
  opacity:1;
}
<div>
<img src="image.jpg" class="imgage" />
<span class="text">Hello</span>
</div>