Card title disappear despite z-index? - html

Question

I'm trying to make a card with a title and description but when I set a background image on that image, my card title disappeared but not my description. It happens even if I do the same code for both of them.
I know I don't have to write here animation codes too but I really don't have any idea why this is happening.
Image:
z-index doesn't work I guess.
.index {
width: 400px;
height: 400px;
background-color: white;
float: left;
margin-right: 30px;
border-radius: 10px;
overflow: hidden;
position: relative;
color: white;
cursor: pointer;
}
.index_img {
width: 100%;
height: 100%;
z-index: -1;
}
.index_html {
background-image: url(web_image_html.jpeg);
background-position: center;
background-size: cover;
z-index: -1;
}
.index a {
color: #fff;
text-decoration: none;
}
.index_title {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 30px;
}
.index_description {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-family: 'Inter', sans-serif;
width: 100%;
font-size: 18px;
}
.index_title,
.index_description {
background-color: rgba(82, 81, 81, 0.56);
height: 80px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.index_html:hover {
animation: index-animate 3s ease-in-out;
}
#keyframes index-animate {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
<div class="index">
<a href="">
<div class="index_img index_html"></div>
<h2 class="index_title">HTML</h2>
<p class="index_description">Lorem ipsum dolor sit amet.</p>
</a>
</div>

Answer 1

Remove overflow hidden from the below code
.index {
width: 400px;
height: 400px;
background-color: white;
float: left;
margin-right: 30px;
border-radius: 10px;
position: relative;
color: white;
cursor: pointer;
}

Answer 2

You're on the right track! But you're fumbling a little with the usage of display: flex; and position: absolute;. display: flex; should be used on the parent to see the result on the child(ren), you're using it directly on the children (.index_title and .index_description).
For trying to position 2 elements together with position: absolute; I'd recommend wrapping them together, so you only have to position 1 element!
.index {
width: 400px;
height: 400px;
background-color: white;
float: left;
margin-right: 30px;
border-radius: 10px;
overflow: hidden;
position: relative;
color: white;
cursor: pointer;
}
.index_img {
width: 100%;
height: 100%;
z-index: -1;
}
.index_html {
background: url(web_image_html.jpeg) red;
background-position: center;
background-size: cover;
z-index: -1;
}
.index a {
color: #fff;
text-decoration: none;
}
.index_content {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(82, 81, 81, 0.56);
}
.index_title {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #000;
}
.index_description {
font-family: 'Inter', sans-serif;
font-size: 18px;
}
.index_title,
.index_description {
width: 100%;
margin: 0;
text-align: center;
}
.index_html:hover {
animation: index-animate 3s ease-in-out;
}
#keyframes index-animate {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
<div class="index">
<a href="">
<div class="index_img index_html"></div>
<div class="index_content">
<h2 class="index_title">HTML</h2>
<p class="index_description">Lorem ipsum dolor sit amet.</p>
</div>
</a>
</div>