केवल सीएसएस के साथ छवि पर काले पारदर्शी ओवरले?

Question 1

जब भी माउस केवल CSS के साथ छवि पर मँडरा रहा है, मैं एक छवि में एक पारदर्शी ब्लैक ओवरले जोड़ने की कोशिश कर रहा हूँ। क्या यह संभव है? मैंने यह कोशिश की:

http://jsfiddle.net/Zf5am/565/

लेकिन मुझे दिखाने के लिए div नहीं मिल सकता है।

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

Question 2

मैं उपरिशायी तत्व के स्थान पर एक छद्म तत्व का उपयोग करने का सुझाव दूंगा। क्योंकि छद्म तत्व संलग्न imgतत्वों पर नहीं जोड़े जा सकते हैं, फिर भी आपको लपेटने की आवश्यकता होगीimg तत्व ।

यहाँ लाइव उदाहरण - पाठ के साथ उदाहरण

<div class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

सीएसएस के लिए, तत्व पर वैकल्पिक आयाम सेट करें .image, और अपेक्षाकृत स्थिति। यदि आप एक उत्तरदायी छवि के लिए लक्ष्य कर रहे हैं, तो बस आयामों को छोड़ दें और यह अभी भी काम करेगा (उदाहरण) । यह केवल ध्यान देने योग्य है कि आयाम मूल तत्व पर होने चाहिए क्योंकि imgतत्व स्वयं के विपरीत है, देखें ।

.image {
    position: relative;
    width: 400px;
    height: 400px;
}

बच्चे के imgतत्व 100%को माता-पिता की एक चौड़ाई दें और vertical-align:topडिफ़ॉल्ट आधारभूत संरेखण मुद्दों को ठीक करने के लिए जोड़ें ।

.image img {
    width: 100%;
    vertical-align: top;
}

छद्म तत्व के लिए के रूप में, एक सामग्री मूल्य सेट करें और .imageतत्व के सापेक्ष बिल्कुल स्थिति । एक चौड़ाई / ऊंचाई 100%यह सुनिश्चित करेगी कि यह अलग-अलग imgआयामों के साथ काम करे । यदि आप तत्व को परिवर्तित करना चाहते हैं, तो एक अपारदर्शिता सेट करें 0और संक्रमण गुण / मान जोड़ें।

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

1संक्रमण को सुविधाजनक बनाने के लिए छद्म तत्व पर मँडरा करते समय एक अपारदर्शिता का उपयोग करें :

.image:hover:after {
    opacity: 1;
}

END परिणाम यहां देखें

यदि आप होवर पर टेक्स्ट जोड़ना चाहते हैं:

सरलतम दृष्टिकोण के लिए, केवल पाठ को छद्म तत्व के contentमान के रूप में जोड़ें :

यहाँ उदाहरण दें

.image:after {
    content: 'Here is some text..';
    color: #fff;

    /* Other styling.. */
}

कि ज्यादातर मामलों में काम करना चाहिए ; हालाँकि, यदि आपके पास एक से अधिक imgतत्व हैं, तो हो सकता है कि आप एक ही पाठ को होवर पर प्रदर्शित न करना चाहें। इसलिए आप पाठ को एक data-*विशेषता में सेट कर सकते हैं और इसलिए प्रत्येक imgतत्व के लिए अद्वितीय पाठ है ।

यहाँ उदाहरण दें

.image:after {
    content: attr(data-content);
    color: #fff;
}

एक साथ contentका मूल्य attr(data-content), छद्म तत्व से पाठ को जोड़ता है .imageतत्व की data-contentविशेषता:

<div data-content="Text added on hover" class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

आप कुछ स्टाइल जोड़ सकते हैं और कुछ इस तरह से कर सकते हैं:

यहाँ उदाहरण दें

उपरोक्त उदाहरण में, :afterछद्म तत्व काले उपरिशायी के रूप में कार्य करता है, जबकि :beforeछद्म तत्व कैप्शन / पाठ है। चूंकि तत्व एक-दूसरे से स्वतंत्र हैं, इसलिए आप अधिक इष्टतम स्थिति के लिए अलग स्टाइल का उपयोग कर सकते हैं।

.image:after, .image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:after {
    content: '\A';
    width: 100%; height:100%;
    top: 0; left:0;
    background:rgba(0,0,0,0.6);
}
.image:before {
    content: attr(data-content);
    width: 100%;
    color: #fff;
    z-index: 1;
    bottom: 0;
    padding: 4px 10px;
    text-align: center;
    background: #f00;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
    opacity: 1;
}

Question 3

CSS3 फ़िल्टर

हालाँकि यह सुविधा केवल वेबकिट में लागू है, और इसमें ब्राउज़र संगतता नहीं है , लेकिन यह देखने लायक है:

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

JSFiddle डेमो

संदर्भ

एसओ पर इसी तरह के विषय

Question 4

तुम पास थे। यह काम करेगा:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

आपको :hoverछवि को डालने की आवश्यकता है , और .overlayकवर को जोड़कर right:0;और पूरी छवि बनाएं bottom:0।

jsfiddle: http://jsfiddle.net/Zf5am/569/

Question 5

यहाँ का उपयोग करने का एक अच्छा तरीका है: अतिरिक्त ओवरले div के बजाय छवि div के बाद: http://jsfiddle.net/Zf5am/576/

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}

Question 6

.overlayकोई ऊँचाई या चौड़ाई और कोई सामग्री नहीं थी, और आप पर मंडरा नहीं सकते display:none।

मैंने इसके बजाय div को उसी आकार और स्थिति के रूप में दिया .imageऔर RGBAहोवर पर मूल्य बदल दिया ।

http://jsfiddle.net/Zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }

Question 7

देखें कि मैंने यहाँ क्या किया है: http://jsfiddle.net/dyarbrough93/c8wEC/

सबसे पहले, आप ओवरले के आयामों को कभी सेट नहीं करते हैं, जिसका अर्थ है कि यह पहली जगह में दिखाई नहीं दे रहा था। दूसरी बात, मैं आपको ओवरले के z- इंडेक्स को बदलने की सलाह देता हूं जब आप छवि पर हॉवर करते हैं। अपनी आवश्यकताओं के अनुरूप ओवरले की अस्पष्टता / रंग बदलें।

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}

Question 8

आप छवि की अस्पष्टता के साथ खेलकर और काले रंग की छवि के पृष्ठभूमि का रंग निर्धारित करके इसे पूरा कर सकते हैं। छवि को पारदर्शी बनाने से, यह गहरा दिखाई देगा।

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

सीएसएस:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

इस कार्य को अन्य ब्राउज़र में भी करने के लिए आपको ब्राउज़र-विशिष्ट अपारदर्शिता को सेट करना पड़ सकता है।

Question 9

मैं छवि के आकार के आपके ओवरले डिव को एक मिनिमल-हाइट और मिन-चौड़ाई देता हूं, और होवर पर पृष्ठभूमि का रंग बदल देता हूं

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}