picture on hover show text under it

Question

I'm trying to make a page and within it I'm making that when a picture is hovered on it will show like a card and text will appear under it but I'm not sure how to make the text part happen this is what I have for now (I'm a beginner)

            <img src="pics/ii.jpg" class="crd_1">
            <p class="crd1">hskgnskg<br>kdjfehbdbdgdf<br>jdbhfkdf</p>
            <img src="pics/vi.jpg" class="crd_2">
            <img src="pics/iii.jpg" class="crd_3">
            <img src="pics/v.jpg" class="crd_4"> 

this is the HTML part.

.crd_1{
    width: 220px;
    height: 240px;
    padding-bottom: 50px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: red;
    margin-top: 390px;
    margin-left:250px;
    cursor: pointer;
    position: absolute;
    transition: .3s ease-in-out;
 }

 .crd_2{
    width: 220px;
    height: 240px;
    padding-bottom: 50px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: red;
    margin-top: 390px;
    margin-left:510px;
    background-color: red;
    cursor: pointer;
    word-spacing: 50px;
    position: absolute;
    transition: .3s ease-in-out;
}

.crd_3{
    width: 220px;
    height: 240px;
    padding-bottom: 50px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: red;
    margin-top: 390px;
    margin-left:770px;
    background-color: red;
    cursor: pointer;
    position: absolute;
    transition: .3s ease-in-out;
}

.crd_4{
    width: 220px;
    height: 240px;
    padding-bottom: 50px;
    padding-top: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: red;
    margin-top: 390px;
    margin-left: 1030px;
    background-color: red;
    cursor: pointer;
    position: absolute;
    transition: .3s ease-in-out;
}

.crd_1:hover{
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}

.crd_2:hover{
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}
.crd_3:hover{
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}
.crd_4:hover{
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}

this is the CSS part.

this will make the picture go up on hover and display as a card,but the text part is the one I'm not able to do if you could please help me

Answer 1

If I understand correctly, what you are trying to achieve when the the image is hovered it will do the following:

1. Image will 'move' upwards
2. Text will display below

There are several ways to achieve this, what I would do is:

1. Wrap your image and text, this way the hover event can cover the elements inside:

  <div class='wrapper'>
   <img src="pics/ii.jpg" class="crd_1">
   <p class="crd1">hskgnskg<br>kdjfehbdbdgdf<br>jdbhfkdf</p>
  <div/>

2. Set your texts 'p' tags to hidden: display:none
3. Target the elements accordingly under wrapper like so:

.wrapper:hover image {
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}
.wrapper:hover p {
    display: unset;
}