画像にもやがかかっていて、文字がぼやけてしまう

Question

現象：画像にもやがかかっていて、文字がぼやけてします

画像の中に文章を表示させたくて、
position: relative;
position: absolute;
を使用しました。

すると、文字がぼやけて見えてしまうようになり、文章側（h3）に「z-index: 1;」で設定してみても変わらずでした。

画像の真ん中あたりに文字がくると、ぼやけてしまい困っています。
何かいい方法をご存知でしたら、教えていただけると助かります。

よろしくお願いします。

<section class="consept">
  
<div class="consept__wrap">

<div class="consept__contents">
<h2>CONSEPT</h2>
<h3>不動産の名義変更を、<br>ネットで簡単に、安心価格で</h3>
<p>---事務所が運営する<br>
不動産名義変更／専用サイトは、<br>
いかなる種類の不動産名義変更でも、ご相談頂けます。</p>
</div>

<div class="consept__img">
<img src="img/[e-mail]" alt="">
</div>

</div>

</section>

.consept {
  height: 688px;
  margin: 103px 0 98px 0;
}

.consept__wrap {
  position: relative;
  max-width: 1280px;
  display: flex;
  margin: 0 auto;
  padding-top: 80px;
  padding-left: 190px;
}


.consept__contents h2 {
  display: inline-block;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.1px;
  color: #04B1B7;
  border-bottom: 2px solid #04B1B7;
  width: 28px;
  padding-bottom: 9px;
}

.consept__contents h3 {
  font-size: 40px;
  line-height: 1.6;
  letter-spacing: 5px;
  color: #333333;
  z-index: 1;
}

.consept__contents p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.1px;
  color: #333333;
}

.consept__img {
  position: absolute;
  top: 0;
  right: 0;
}

.consept__img img {
  width: 880px;
  height: 487px;
}

Answer 1

z-indexはposition: static以外の状態でないと効果がありません。
下記のcssを追加すれば直ると思います。

.consept__contents{
	position: relative;
	z-index: 10;
}

Comments

[退会済みユーザー]

ありがとうございます！
無事解決しました。
教えていただきありがとうございます＾＾
とても助かりました。