HTML-এ :hover-এ ইমেজের ওপর <div> বা <span> দেখানো

ইমেজের ওপর মাউস হভার করলে div বা span এলিমেন্ট দেখানোর জন্য .image:hover .overlay সিলেক্টর ব্যবহার করা হয়।

.overlay এলিমেন্টকে প্যারেন্ট এলিমেন্টের সাপেক্ষে অ্যাবসোলিউটলি পজিশন করতে হলে সেটির height এবং width 100% করে দিয়ে প্যারেন্টকে inline-block করা হয়।

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;
  /* অন্যান্য স্টাইলিং - উদাহরণ দেখুন */
  img {
    vertical-align: top;
  }
}