HTML में :hover पर इमेज के ऊपर <div> या <span> प्रदर्शित करें

इमेज पर माउस होवर होने पर div या span एलिमेंट को इमेज के ऊपर दिखाने के लिए, यह .image:hover overlay की मदद से किया जा सकता है।

.overlay एलिमेंट को पैरेंट एलिमेंट के सापेक्ष निरपेक्ष रूप से पोजिशन करने के लिए, हम सभी इमेज साइज के लिए ऊंचाई और चौड़ाई 100% देते हैं जिससे पैरेंट एलिमेंट इंलाइन-ब्लॉक बन जाता है।

HTML

<div class="image"> 
    <img src="..." /> 
    <div class="overlay">Content to be displayed on hover</div> 
</div>

CSS

.image { 
    position:relative; 
    display:inline-block; 
} 
.overlay { 
    display:none; 
} 
.image:hover .overlay { 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,.5); 
    position:absolute; 
    top:0; 
    left:0; 
    display:inline-block; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    /* All other styling - see example */ 
    img { 
        vertical-align:top; 
    } 
}