सीएसएस फीड इन होवर

Question

मैं वर्तमान में सीएसएस का उपयोग कर कुछ पाठ पर होवर करते समय एक छवि फीका करने का प्रयास कर रहा हूं। मैंने सीएसएस कोड लागू किया है, लेकिन प्रभाव नहीं दिखाता है; div प्रकट होता है, लेकिन फीका-इन के बिना।

इसके अलावा, मुझे एहसास है कि सीएसएस संक्रमण वास्तव में आईई के साथ काम नहीं करते हैं। अगर कोई मुझे इसके लिए कामकाज की सही दिशा में इंगित कर सकता है, तो इसकी सराहना की जाएगी। (:

सीएसएस:

.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); 
} 

एचटीएमएल:

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

धन्यवाद

Answer 1

अपने प्रदर्शन नियम को हटाने के साथ प्रयास करें:

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

    /*display: none; remove this */ 

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

आप अस्पष्टता 0 है के रूप में आपको प्रदर्शन की आवश्यकता नहीं होगी: कोई नहीं और आप अलग-अलग प्रकार के रूप में प्रदर्शित नहीं होने के बीच प्रदर्शित नहीं कर सकते हैं।

और इस नियम को बदला:

.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; 
} 

(मंडराना और फिर अवधि यह थोड़ा चिड़चिड़ा बना सकते हैं)।

मैंने संक्रमण में एक एमएस प्रीफिक्स्ड संस्करण भी जोड़ा। यह स्पष्ट रूप से इस संदर्भ में उपयोगी नहीं है।

IE9 के लिए और नीचे आप किसी तत्व में फीका करने के लिए jQuery का उपयोग कर सकते हैं (या बस सेटटाइमआउट लूप में अस्पष्टता को संशोधित करने के लिए वेनिला जावास्क्रिप्ट का उपयोग करें)। यहाँ

फिडल:
http://jsfiddle.net/AbdiasSoftware/9rCQv/

यह आप के बाद क्या कर रहे है?