どのように背景画像をぼかし、ホバー上にテキストを表示するか[重複] - html、css

私が作成しようとしている効果は、私のイメージ上ではイメージがぼやけて、その上にテキストが表示されます。これまでは、画像をぼかしてその上にテキストを表示することができましたが、唯一の問題はテキストもぼやけていることです。テキストがぼやけて表示されないようにするにはどうすればよいですか？任意の提案を高く評価

HTML

<div class="row3">
<div class="six left">
<p class = "imgDescription">Description yo</p>
</div><!--closing column 6-->

<div class="three middle">
</div><!--closing column 3-->

<div class="three right">
</div><!--closing column 3-->
</div>

CSS

.row3 .left{
background: url("zombiegame.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: all 1s ease;
-moz-webkit-transition: all 1s ease;
-ms-webkit-transition: all 1s ease;
-o-webkit-transition: all 1s ease;
transition: all 1s ease;
}

.imgDescription{
color: white;
visibility: hidden;
opacity: 0;
}

.row3 .left:hover{
background: url("zombiegame.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-filter: blur(1px);
}

.row3 .left:hover .imgDescription{
visibility: visible;
opacity: 1;
}

回答：

私は試してみることができる方法を見つけ、p要素のバブルをキャンセルしている間にcssを使用せずにブラーイベントを定義すると、親ブラーイベントは子要素に影響しません。