ছবির উপর মাউস ঘোরালে div বা স্প্যান এলিমেন্টকে ইমেজের উপরে দেখানোর অনুমতি দেওয়ার জন্য, এটি .image:hover overlay,
এর সাহায্যে করা যেতে পারে।প্যারেন্ট এলিমেন্টের সাথে একেবারে আপেক্ষিক .overlay এলিমেন্টের অবস্থানের জন্য আমরা প্যারেন্ট এলিমেন্ট ইনলাইন-ব্লক তৈরি করে সমস্ত ইমেজ সাইজের জন্য উচ্চতা এবং প্রস্থ 100% দিই।
HTML
<div class="image"> <img src="..." /> <div class="overlay">Content to be displayed on hover</div> </div>
CSS
By hiding the .overlay element by default, we use the selector .image:hover .overlay to change the styling on hover. Due to the HTML structure, this works well because .overlay is a descendant element.
.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;
}
} 