CSS Làm mờ khi di chuột

Question

Tôi hiện đang cố gắng để có một hình ảnh mờ dần khi tôi di chuột qua một số văn bản bằng cách sử dụng CSS. Tôi đã áp dụng mã CSS, nhưng hiệu ứng không hiển thị; div xuất hiện, nhưng không có fade-in.

Ngoài ra, tôi nhận ra rằng quá trình chuyển đổi CSS không thực sự hoạt động với IE. Nếu bất cứ ai có thể chỉ cho tôi đúng hướng của một cách giải quyết cho điều đó, nó sẽ được nhiều đánh giá cao. (:

CSS:

.thumbnail{ 
position: relative; 
z-index: 0; 
} 

.thumbnail:hover{ 
background-color: transparent; 
z-index: 50; 
} 

.thumbnail span{ /*CSS for enlarged image*/ 
position: relative; 
display: none; 
color: black; 
text-decoration: none; 
opacity:0.0; 
filter:alpha(opacity=0); 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding: 5px; 
left: -1000px; 
border: 1px solid gray; 
background-color: #fff; 
} 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
position: relative; 
display: inline; 
top: -290px; 
left: -25px; 
opacity:1.0; 
filter:alpha(opacity=100);/*position where  
enlarged image should offset horizontally */ 
-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
} 

#networking { 
width: 200px; 
height: 140px; 
margin-left: 360px; 
top: 115px; 
position: absolute; 
background-color: #613286; 
opacity:1.0; 
filter:alpha(opacity=100); 
color: #ffffff; 
text-align:center; 
border-radius: 20px; 
-webkit-transform: rotate(14deg); 
-moz-transform: rotate(14deg); 
-ms-transform: rotate(14deg); 
-o-transform: rotate(14deg); 
transform: rotate(14deg); 
} 

HTML:

<div id="networking"> 
<a class="thumbnail" href="1.5.2experientialstudios.html#down4"><h4>Networking Lounge</h4>  
<span><img src="images/net3.jpg" width="250" /></span></a> 
</div> 

Cảm ơn bạn

Answer 1

Hãy thử với loại bỏ quy tắc hiển thị của bạn:

.thumbnail span{ /*CSS for enlarged image*/ 
    position: relative; 

    /*display: none; remove this */ 

    color: black; 
    text-decoration: none; 
    opacity:0.0; 
    filter:alpha(opacity=0); 
} 

Như bạn có opacity 0 bạn sẽ không cần hiển thị: không và bạn không thể thực hiện chuyển đổi giữa không được hiển thị ở tất cả để được gạch chân vì chúng là các loại khác nhau.

Và sửa đổi quy tắc này:

.thumbnail:hover span { /*CSS for enlarged image on hover*/ 

    top: 0px; /* adjust as needed */ 
    left: -25px; 
    opacity:1.0; 
    filter:alpha(opacity=100);/*position where  
    enlarged image should offset horizontally */ 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

(di chuột và sau đó khoảng có thể làm cho nó một chút tăng vọt).

Tôi cũng đã thêm một phiên bản tiền tố ms để chuyển tiếp. Nó rõ ràng là không hữu ích trong bối cảnh này.

Đối với IE9 trở xuống, bạn có thể sử dụng jQuery để làm mờ phần tử (hoặc chỉ cần sử dụng JavaScript vani để sửa đổi độ mờ trong vòng lặp setTimeout).

Fiddle ở đây:
http://jsfiddle.net/AbdiasSoftware/9rCQv/

Đây có phải là những gì bạn đang sau?