css Einblendung für Blocktext beim Schweben des Bildes?

Question

Also das ist mein Code und ich wollte css3 Übergänge verwenden, um die Text- und Hintergrundfarbe einzublenden, wenn Sie das Bild schweben. Ich habe zahlreiche Selektoren und Übergangstypen ausprobiert, aber ich kann es nicht richtig verstehen. Jede Hilfe wird sehr geschätzt.

siehe Demo unter

http://jsfiddle.net/jiceb/xsFmA/

<a href="#"> 
     <h2>Some Text</h2> 
     <img src="http://www.sheridanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/> 
</a> 

und css

a { position: relative; display: inline-block } 

a img { 
    width:250px; 
} 

a h2 { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: 0; 
    background: black; 
    color: #fff; 
} 

a:hover h2 { 
    display: block; 
} 

Answer 1

Anstatt display:none und display:block verwenden, einfach opacity verwenden und eine transition zu Ihrem a h2 Selektor hinzuzufügen:

a h2 { 
    opacity:0; /* Completely invisible. */ 
    transition:1s; /* A 1 second transition. */ 
} 

a:hover h2 { 
    opacity:1; /* Completely visible. */ 
} 

Dadurch wird die Opazität über den Zeitraum von 1 Sekunde von 0 auf 1 erhöht.

JSFiddle demo.