Css disappears on transition for text block when hovering image?

Question

So, this is my code, and I was looking to use css3 transitions to gradually change the color of text and background when hovering an image. I tried a lot of selectors and transition types, but didn't seem to understand that any help was much appreciated.

see demo below

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> 

and 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

Instead of using display:none and display:block just use opacity and add transition to the a h2 selector:

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

This will increase the opacity from 0 to 1 for 1 second.

JSFiddle demo .