मुझे एक छवि पर एक आइकन लगाने की जरूरत है।

.item {
  position: relative;
}

.des {
  color: #fff;
  text-align: left;
}
<div class="card">
    <div class="item">
        <img class="card-img-top" src="images/g33.jpg" alt="Avatar">
        <div class="des">
            <i class="fa fa-plus-square" style="font-size:48px;color:red"></i>
       </div>
    </div>
    <div class="card-body">
        <h5 class="card-title ">Farwa Waheed</h5>
        <p class="card-text" style="font-size:13px;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
   </div>
</div>

मुझे उम्मीद है कि आउटपुट छवि पर बाईं ओर नीचे की ओर आइकन होगा लेकिन वास्तविक आउटपुट: आइकन चित्र से नीचे आ रहा है

1
Saman Waheed 26 अक्टूबर 2019, 17:42

1 उत्तर

सबसे बढ़िया उत्तर

आप नीचे की तरह CSS का उपयोग कर सकते हैं। आप left या bottom का मान बदलकर भी छवि की स्थिति बदल सकते हैं।

.item {
  position: relative;
}

.des {
  position: absolute;
  bottom: 0;
  left: 0;
}

अगर यह काम नहीं करता है। मुझे बताओ।

0
Ibrahim Hasnat 26 अक्टूबर 2019, 15:04