सीएसएस: मंडराना संक्रमण

Question

HTML संरचना के बाद

<div id="small_gal"> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
    <div><img src="images1.jpg" /></div> 
</div> 

छवियों dropshadows कर रहे हैं तो border एक समाधान है, क्योंकि यह छवि

सीमा है बाहर हो जाएगा नहीं है संक्रमण हो रहा है और यह एफएफ पर आसानी से काम करता है लेकिन क्रोम या अन्य ब्राउज़रों में नहीं

यहां कोड है जो मैं का इस्तेमाल किया है

#small_gal div:hover{cursor: pointer;} 
#small_gal div:after { 
    content: ''; 
    position: absolute; 
    width: 112px; 
    height: 81px; 
    border: 3px solid #e27501; 
    left: 9px; top: 9px; 
    z-index: 9; 

    opacity: 0; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
} 
#small_gal div:hover:after { 
    opacity: 1; 
} 

नोट:

#small_gal 

केवल कंटेनर तो हम लागू कर सकते हैं प्रत्येक छवि एक div में लपेटा जाता है है: के बाद

Answer 1

Firefox 4+ केवल ब्राउज़र है कि :before और :after जैसे छद्म-तत्वों के संक्रमण का समर्थन करता है।

स्रोत: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/

Answer 2

सीएसएस संक्रमण अभी भी वेबकिट में प्रयोगात्मक हैं इसलिए शायद आपको कुछ किनारे मामले से जुड़े बग मारा गया है :: छद्म चयनकर्ता के बाद। मैं इसे पूरी तरह से टालने का सुझाव देता हूं और इसके बजाय border-color को बदल रहा हूं। यह क्रोम और सफारी में ठीक काम किया:

#small_gal div.p { 
    border: 2px solid transparent; 
    -webkit-transition: border-color 1s ease-in; 
} 

#small_gal div.p:hover { 
    border-color: orange; 
} 

Answer 3

आप की तरह छद्म तत्वों पर सीएसएस संक्रमण का उपयोग कर सकते हैं: पहले और: आप तत्व पर ही संपत्ति को परिभाषित करने और छद्म तत्व में inherit उपयोग कर सकते हैं के बाद यदि। तो opacity पर एक संक्रमण डालने के बजाय आपके मामले में, आप border-color पर एक संक्रमण डाल सकते हैं।

*, *:before, *:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#small_gal div { 
 
    border-color: transparent; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    -webkit-transition: border-color 0.5s ease-in-out; 
 
    -moz-transition: border-color 0.5s ease-in-out; 
 
    -o-transition: border-color 0.5s ease-in-out; 
 
    -ms-transition: border-color 0.5s ease-in-out; 
 
    transition: border-color 0.5s ease-in-out; 
 
} 
 
#small_gal div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-color: inherit; 
 
    border-style: solid; 
 
    border-width: 3px; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#small_gal div:hover { 
 
    border-color: #e27501; 
 
} 
 
#small_gal div img { 
 
    display: block; 
 
    height: auto; 
 
    max-width: 150px; 
 
    width: auto; 
 
}

<div id="small_gal"> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
    <div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div> 
 
</div>