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>
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;
}