title: picture on hover show text under it
body: <p>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)</p>
  <pre><code>            &lt;img src=&quot;pics/ii.jpg&quot; class=&quot;crd_1&quot;&gt;
              &lt;p class=&quot;crd1&quot;&gt;hskgnskg&lt;br&gt;kdjfehbdbdgdf&lt;br&gt;jdbhfkdf&lt;/p&gt;
              &lt;img src=&quot;pics/vi.jpg&quot; class=&quot;crd_2&quot;&gt;
              &lt;img src=&quot;pics/iii.jpg&quot; class=&quot;crd_3&quot;&gt;
              &lt;img src=&quot;pics/v.jpg&quot; class=&quot;crd_4&quot;&gt; 
  </code></pre>
  <p>this is the HTML part.</p>
  <pre><code>.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;
  }
  </code></pre>
  <p>this is the CSS part.</p>
  <p>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</p>