Herstellung Text auf schweben zeigen und Unschärfe-Effekt fix blinkt

Question

/* CSS used here will be applied after bootstrap.css */ 
 
body{ 
 
background-color:yellow; 
 
} 
 

 
img{ 
 
\t -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
     -o-transition: all 0.5s ease; 
 
     -ms-transition: all 0.5s ease; 
 
      transition: all 0.5s ease; 
 
} 
 

 
img:hover{ 
 
\t -webkit-filter:blur(5px); 
 
}

<img src="http://i.stack.imgur.com/K0jNI.png">

Wenn Sie auf das Bild schweben die Grenzen des Bildes Blitz ein wenig, bevor sie sich .. Gibt es eine Möglichkeit, das zu beheben?

Und wie mache ich einen Text in der Mitte des Bildes, wenn ich den Mauszeiger darüber bewege?

Answer 1

EDIT: Das sieht jetzt groß in Chrome

Ich glaube nicht, ist es durchaus möglich ist, einen super sauber Übergang zu erhalten, wenn webkit Blur. Ich hatte eine Menge Rendering-Probleme und Störungen, wenn ich es vorher benutzte. Es ist auch eine Ressource, wenn es auf vielen Elementen verwendet wird. Mein Ratschlag, die Beschleunigung auf linear zu ändern und nur die Unschärfe zu erreichen. Das sollte es ein wenig straffen.

img{ 
    -webkit-transition: -webkit-filter 0.5s linear; 
    -moz-transition: -webkit-filter 0.5s linear; 
    -o-transition: -webkit-filter 0.5s linear; 
    -ms-transition: -webkit-filter 0.5s linear; 
    transition: -webkit-filter 0.5s linear; 
} 

Wie für den Text verblassen in. Sie müssen in einem Element hinzuzufügen, die anfänglich opacity:0; ist aber dann geändert opacity:1; wenn der übergeordnete Block schwebte wird. Anfängliche HTML dies geändert:

<div class='block'> 
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"> 
    <span>Hey there</span> 
</div> 

Und das neue CSS

/* CSS used here will be applied after bootstrap.css */ 
body { 
    background-color: yellow; 
} 

img { 
    -webkit-transition: -webkit-filter 0.5s linear; 
    transition: -webkit-filter 0.5s linear; 
} 

.block { 
    position: relative; 
    width: 400px; 
} 
.block img { 
    width: 100%; 
} 
.block span { 
    opacity: 0; 
    -webkit-transition: all .3s; 
    transition: all .3s; 
    color: white; 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
      transform: translateY(-50%); 
    text-align: center; 
    left: 0; 
    right: 0; 
} 
.block:hover > span { 
    opacity: 1; 
} 

img:hover { 
    -webkit-filter: blur(4px); 
} 

Beispiel hier

http://codepen.io/jcoulterdesign/pen/58d613e80e4a768cc9e54aa1e7aaa0af