CODEWITHSUNDEEP
htmlcss
Aman
Aman

Reputation: 155

display div at the bottom over a img

HTML:

<div class="items-display">
<div class="item-container">

    <?php   foreach ($userItems_get as $item => $value) {

            if ($value['prefab'] == 'wearable') {

        //  echo $value['name'] . "</br>"; ?>

        <img src="<?php echo $value['image_inventory']; ?>.png" width="90" height="60">

    <?php   if (!isset($value['item_rarity'])) {
                $rarity = "common";
            } else {
                $rarity = $value['item_rarity'];
            }
            ?>

           <p> <?php echo $rarity; ?> </p>

    <?php } 
     }
     ?>
</div>
</div>

CSS: 

.item-display {

}

.item-container img {
    height: 60px;
    width: 95px;
    background-color: grey;
    color: white;
    border-radius: 5px;
    border: 2px solid #252525;
    position: relative;
}

.item-container p { 
    height: 13px;
    width: 95px;
    background-color: #252525;
    color: white;
    text-align: center;
    padding-bottom: 4px;
    bottom: 0;
    position: absolute;
}

output: http://puu.sh/kYdjv/95aaccfc51.jpg

want it to look like this: https://i.sstatic.net/Ld7hb.jpg

I want it to appear over the image at the bottom just like in the image. but it keeps appearing outside the class.

Upvotes: 1

Views: 40

Answers (2)

Paulie_D
Paulie_D

Reputation: 114991

You need something like this:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.item-container {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px;
}
.item-container img {
  display: block;
  height: 60px;
  width: 95px;
  background-color: grey;
  color: white;
  border-radius: 5px;
  border: 2px solid #252525;
}
.item-container p {
  width: 95px;
  background-color: red;
  color: white;
  text-align: center;
  padding-bottom: 4px;
  bottom: 0;
  position: absolute;
}
<div class="item-container">
  <img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">
  <p>Lorem ipsum</p>
</div>

Upvotes: 1

Jeroen Bellemans
Jeroen Bellemans

Reputation: 2035

Parent container should have position: relative, and the child (overlapping element) should have position: absolute. Like this:

.img-container {
    positon: relative;
}

.overlapping-element {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Upvotes: 0

Related Questions