css mờ dần trong quá trình chuyển đổi cho văn bản khối khi di chuột hình ảnh?

Question

Vì vậy, đây là mã của tôi và tôi đang tìm cách sử dụng chuyển tiếp css3 để mờ dần trong văn bản và màu nền khi bạn di chuột qua hình ảnh. Tôi đã thử rất nhiều selectors và các loại chuyển tiếp nhưng cant dường như để có được nó ngay bất kỳ trợ giúp được đánh giá rất nhiều.

xem demo bên dưới

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> 

và 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

Thay vì sử dụng display:none và display:block, chỉ cần sử dụng opacity và thêm một transition-a h2 chọn của bạn:

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

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

Điều này sẽ làm cho độ mờ tăng từ 0 lên 1 trong khoảng thời gian 1 giây.

JSFiddle demo.