如何在背景圖像上模糊背景圖像並在其上顯示文字

Question

我試圖創建的效果是當我將鼠標懸停在圖像上時，它會模糊圖像並在其上顯示一些文字。到目前爲止，我能夠模糊圖像並在其上顯示文字，唯一的問題是文字也變得模糊。我如何防止文字模糊不清？任何建議表示讚賞

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; 
} 

Answer 1

我找到一種方法，你可以試試，不使用CSS和定義模糊事件而p元素上取消泡沫，那麼父模糊事件不會影響子元素。