wie Hintergrundbild zu verwischen und Text über es auf Schwebeflug zu zeigen

Question

Der Effekt, den ich versuche zu erstellen ist, wenn ich über mein Bild schweben wird es das Bild verwischen und etwas Text darüber anzeigen. Bis jetzt bin ich in der Lage, das Bild zu verwischen und den Text darüber anzuzeigen, das einzige Problem ist, dass der Text auch unscharf ist. Wie verhindere ich, dass der Text auch unscharf wird? Anregungen

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

ich einen Weg finden, versteht sich, dass Sie versuchen, nicht mit CSS und eine Unschärfe Ereignis definieren, während Blase auf p-Element abzubrechen, dann ist die Mutter Blur-Event wirkt sich nicht auf das Child-Element aus.