CSS positioning and z-index on card - html

Question

I'm trying to code this card design:
However, I need some help with the positioning and z-index. This is how far I've come:
.card {
width: 450px;
height: 400px;
background: lightblue;
}
.card-hover-state {
position: relative;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, #000000 0%, rgba(216,216,216,0.00) 100%);
opacity: 0.6;
}
.card-hover-state-title {
font-size: 15px;
color: #FFFFFF;
max-width: 60%;
}
.card-hover-state-button {
font-size: 11px;
color: #FFFFFF;
}
<div class="card">
<div class="card-hover-state"></div>
<div class="information-container">
<div class="card-hover-state-title">Brace yourself - A fancy Lorem Ipsum Title is comming</div>
<div class="card-hover-state-button">READ MORE</div>
</div>
</div>
However, the text isn't showing. What am I missing?

Answer 1

Use position: relative on .card, then you actually don't need .card-hover-state - you can use a pseudo element instead. Whichever of those you use, you need to add position: absolute; top: 0; left: 0; to position it over the .card background.
Then I would make .information-center a flex parent and use justify-content: space-between to separate its children, and align-items: center to center them vertically, and add position: relative so it will have a position that puts it on top of the absolutely positioned pseudo element (or .card-hover-state) that comes before it.
.card {
width: 450px;
height: 400px;
background: lightblue;
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
-180deg,
#000000 0%,
rgba(216, 216, 216, 0.00) 100%
);
opacity: 0.6;
}
.information-container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
color: #fff;
}
.card-hover-state-title {
font-size: 15px;
max-width: 60%;
}
.card-hover-state-button {
font-size: 11px;
}
<div class="card">
<div class="information-container">
<div class="card-hover-state-title">Brace yourself - A fancy Lorem Ipsum Title is comming</div>
<div class="card-hover-state-button">READ MORE</div>
</div>
</div>

Answer 2

You can get it by using below approach.
I just added display:table to your .information-container and assigned width:100% to take full parent div width, after that I assigned .card-hover-state-title and .card-hover-state-button
to position:relative so they don't use the parent div's opacity:0.6 and also added display:table-cell and width to get inline both.
I added CSS properties in the following classes:
.information-container {
display: table;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.card-hover-state-title {
font-size: 15px;
color: #FFFFFF;
width: 50%;
position: relative;
display: table-cell;
}
.card-hover-state-button {
font-size: 11px;
color: #FFFFFF;
position: relative;
display: table-cell;
text-align: right;
vertical-align:middle;
}
.card {
width: 450px;
height: 400px;
background: lightblue;
position: relative;
}
.card-hover-state {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, #000000 0%, rgba(216, 216, 216, 0.00) 100%);
opacity: 0.6;
}
.information-container {
display: table;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.card-hover-state-title {
font-size: 15px;
color: #FFFFFF;
width: 50%;
position: relative;
display: table-cell;
}
.card-hover-state-button {
font-size: 11px;
color: #FFFFFF;
position: relative;
display: table-cell;
text-align: right;
vertical-align:middle;
}
<div class="card">
<div class="card-hover-state"></div>
<div class="information-container">
<div class="card-hover-state-title">Brace yourself - A fancy Lorem Ipsum Title is comming</div>
<div class="card-hover-state-button">READ MORE</div>
</div>
</div>