JSFiddle - React, Tailwind, and code Playground

by rixlabs

HTML

<div class="item">
                    <a href="#">
                        <div class="item__title">TEXT</div>
                    </a>
                    <div class="item__info">
                        <div class="item__info-bg"></div>
                        <div class="item__info-details">
                            <div>
                                <h3>Header - THIS ALL SHOULD BE AT BOTTOM</h3>
                                <p>some text blabla</p>
                                <p>soem more text blabla blablablabla</p>
                            </div>
                        </div>
                    </div>
                </div>

CSS

.item {
      background-color: #fff;
    float: left;
    height: 314px;
    width: 314px;
    margin: 0 12px 12px 0;
    position: relative;
}

a {
          display: block;
        height: 314px;
        width: 314px;
        background-color: orange;
}

.item__title {
          position: absolute;
        bottom: 20px;
        left: 20px;
}

.item__info {
          display: none;
        color: #fff;
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        top: 0;
}

.item__info-bg {
              position: absolute;
            background: #000;
            opacity: 0.7;
            top: 0;
            width: 100%;
            left: 0;
            height: 100%;
            z-index: 1;
}

.item__info-details {
              position: absolute;
     
            bottom: 0px;
            z-index: 2;

            width: 100%;
          
            border: 1px solid red;
}

            h3, p, a {
                color: #fff;
            }
            
            h3 {
                font-size: 16px;
                margin: 0;
            }

            p{ font-size: 12px;}

            a{ 
                font-size: 12px; 
                text-decoration: underline;
            }
            .item:hover .item__info {
                        display: block;
            cursor: pointer;  
            }