CSS3: किसी छवि पर अर्ध-पारदर्शी ओवरले सेट करने के लिए ऑन-होवर ईवेंट का उपयोग करें

Question

मुझे होवर अर्ध-पारदर्शी div पर एक आवश्यकता है जो कुछ पाठ थंबनेल छवि के शीर्ष पर दिखाई देता है? जावास्क्रिप्ट का उपयोग किए बिना और केवल कैस्केडिंग स्टाइल शीट का उपयोग किए बिना ऐसा करना संभव है?

Answer 1

आप कुछ इस तरह की कोशिश कर सकते हैं:, आप छवि के रूप में DIV की पृष्ठभूमि सेट कर सकते हैं पाठ शामिल,

<style type="text/css"> 
.thumb {position:relative;width:200px;height:20px;} 
.thumb:hover .overlay {opacity:0.5;} 
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;} 
</style> 
<div class="thumb"> 
    <div class="overlay"></div> 
    <img src="image.gif" /> 
</div> 

Answer 2

क्या आप थंबनेल के साथ कर रहे हैं पर निर्भर करता है और चालू करने के लिए सीएसएस का उपयोग होवर पर पारदर्शी से ठोस तक दृश्यता।

This'd केवल सफाई से काम करता है, तो आप एक ज्ञात आकार थंबनेल है (क्योंकि यह अपनी पृष्ठभूमि छवि के आकार के एक div AutoSize मुश्किल है), लेकिन यह अपने html में एक सरल उपाय के लिए बनाती हूँ:

<div class="thumb" style="background-image: url(thumb.jpg);"> 
    <p>mouseover text</p> 
</div> 

महत्वपूर्ण सीएसएस कुछ इस तरह होगा ...

div.thumb p { visibility: hidden; } 
div.thumb:hover p { visibility: visible; } 

अपने प्रश्न से सुनिश्चित नहीं हूं कि पूरे div पारदर्शी या सिर्फ पाठ माना जाता है, लेकिन आप पर प्रासंगिक सीएसएस लागू कर सकते हैं या तो स्तर।

Answer 3

ठीक ठीक मुझे पता है, मैं RGBA का उपयोग कर पाते हैं जब कभी अस्पष्टता से अधिक संभव है एक बहुत procuces इस पुरानी है, लेकिन मैं में पड़ गए और अस्पष्टता के बारे में जोड़ने के लिए कुछ है सेटिंग

http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/

देना है कि एक से अधिक लग रही है बेहतर परिणाम, अस्पष्टता विभिन्न ब्राउज़रों में मजाकिया काम कर सकती है और सभी प्रकार की अस्थिर समस्याओं का कारण बन सकती है ... बस मेरे 2 सेंट