Align a div container at the bottom of an image

February 11, 2022

I can’t align a div container at the bottom of an image.
What I’ve tried is editing the attribute position of the image and set it’s value to "relative".

Explaining this is a little bit difficult, but I got html and css code snippets with a little preview:
codepen.io/Proudyy/pen/PoOjYpK
(it’s not 84 lines long, so not too much in my opinion)

This is how it should look like:
https://imgur.com/a/LShx2cM

>Solution :

set position: absolute for .skin-item-footer and position: relative on it’s parent div. Check below code

.skin-item-splashart {
    width: 100%;
    border-radius: 12px;
    position: relative;
}
.skin-item-footer-left-container {
    grid-column: 1;
    display: grid;
    grid-template-rows: repeat(2, auto);
    align-self: start;
    height: 100%;
}
.skin-item-footer-right-container {
    grid-column: 2;
    display: grid;
    align-items: center;
    justify-content: end;
    align-self: end;
    height: 100%;
}
.skin-item-default-name {
    font-size: 24px;
    font-weight: bold;
    margin-left: 3vh;
}
.skin-item-name {
    font-size: 18px;
    color: gainsboro;
    margin: 0;
    margin-left: 3vh;
    grid-row: 1;
}
.skin-item-cost {
    display: grid;
    grid-row: 2;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: 1fr;
}
.skin-item-cost-value {
    color: gainsboro;
    grid-column: 1;
    margin: 0;
}
.skin-item-cost-icon {
    grid-column: 2;
    margin: 0;
}
.skin-item-save-icon {
    cursor: pointer;
    margin-right: 2vh;
}


.skin-item {
    background-color: rgb(0, 40, 75);
    margin: 15px;
    border-radius: 12px;
    height: auto;
    width: 50%;
    position: relative;
}
img{
    max-width: 100%;
}
.skin-item-footer {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 0 0 12px 12px;
    position: absolute;
    bottom: 0;
    height: auto;
    width: 100%;
}

<div class="skin-item">
    <img class="skin-item-splashart" src="https://cdn.communitydragon.org/latest/champion/1/splash-art/skin/1"/>
    <div class="skin-item-footer">
        <div class="skin-item-footer-left-container">
          <p class="skin-item-name">SkinName</p>
          <div class="skin-item-cost">
              <img class="skin-item-cost-icon" src="https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/images/icon-rp-24.png"/>
              <p class="skin-item-cost-value">Spaceholder</p>
          </div>
        </div>
        <div class="skin-item-footer-right-container">
            <img class="skin-item-save-icon" src="https://img.icons8.com/color/32/000000/save--v1.png"/>
        </div>
    </div>
</div>