How to tag H3 and p within a class

Question

How do I tag h3 and a p in the same image, but I want to tag p down as a footerand the h3at the top of the image, hover brings the two tags together.

CSS:

  position:relative;
  height:170px;
  width:100%;
  margin: -90px 100px 110px -0px;
  border:5px solid #E6E6FA;
  box-shadow:4px 4px 8px black;
}

#hColunas{
  font-family:"Lucida Console";
  font-size:20px;
  position:absolute;
  top:0px;
  background-color:rgba(0,0,0,.4);
  color:#fff;
  width:100%;
  height:170px;
  top:-20px;
  opacity:0;
}
#hColunas:hover{
  opacity:1;
}
#pColunas{
  font-family:"Lucida Console";
  font-size:15px;
  position:absolute;
  top:120px;
  background-color:rgba(0,0,0,.4);
  width:100%;
  opacity:0;
}
#hColunas:p{
  top:120px;
}
#pColunas:hover{
  opacity:1;
}

HTML:

<div class="alimages">
  <div class="colunasDeImages">
    <a href="http://www.itapemapark.com.br/" target="_blank"><img src="backgrounds/nyaqua1.jpg" width="220px" height="170px"></a>

    <h3 id="hColunas">Confira nossas instalações</h3>
    <p id="pColunas">Uma nova maneira de curtir o verão</p>
  </div>

  <div class="colunasDeImages">
    <a href="https://www.google.com/" target="_blank"><img src="backgrounds/nyaqua2.jpg"  width="220px" height="170px"></a>
    <h3 id="hColunas">Confira nossas trilhas e passeios</h3>
    <p id="pColunas">Uma nova maneira de curtir o verão</p>
   </div>
   <div class="colunasDeImages">
     <a href="#" target="_blank"><img src="backgrounds/nyaqua3.jpg" width="220px" height="170px"></a>
     <h3 id="hColunas">Confira nosso local para refeições</h3>
     <p id="pColunas">Uma nova maneira de curtir o verão</p>
   </div>

</div>

Answer 1

As quoted by the colleague, don’t use id, use class. The id should be unique among all elements, so your HTML would be wrong actually.

You can use directly as you did your HTML, with the image, H3 and p inside a div container, but to facilitate the positioning of the texts, I think it is more interesting with an extra div for each part of the text, up and down. See both in the example:

.img-with-overlay {
  position: relative;
  width: 400px;
  border: 1px solid;
}

.img-with-overlay img {
  width: 100%;
  display: block;
  margin: auto auto;
  min-height: 300px;
}

.img-with-overlay .top, .img-with-overlay .bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  background: rgba(0, 0, 0, 0.5);
  margin: 0;
  text-align: center;
  line-height: 100%;
  opacity: 0;
  cursor: default;
  color: #eee;
  transition: all;
  transition-duration: 0.2s
}
.img-with-overlay .top {
  top: 0;
  font-size: 2.3em;
}
.img-with-overlay .bottom {
  bottom: 0;
}
.img-with-overlay:hover .top, .img-with-overlay:hover .bottom {
  opacity: 1;
}

<div class="img-with-overlay">
  <img src="http://placekitten.com/500/400" />
  <div class="top">
    <h3>Gato 1</h3>
  </div>
  <div class="bottom">
    <p>Com um div ao redor de cada texto, facilita os posicionamentos</p>
  </div>
</div>
<br />
<div class="img-with-overlay">
  <img src="http://placekitten.com/500/400" />
  <h3 class="top">Gato 2</h3>
  <p class="bottom">Direto só com as tags</p>
</div>

Answer 2

If you want to apply a style to multiple elements use classes because id refers to one and only one element.

Obs: I changed h3 for span so that the texts are compatible with the size of the images in this presentation.

The main idea is how to make the two texts appear in the over.

        .alimages {
            margin:50px 0 0 0;
            width:250px;
            height:240px;
             text-align:center;
        }

        .image {
            position:relative;
            margin:40px 0 0 40px;
        }
        
        .overlay, .overlayp  {
            display:none;
        }
        
        .image:hover .overlay {
            width:250px;
            height:240px;
            background:rgba(0,0,0,0);
            position:absolute;
            top:-22px;
            left:-15px;
            display:inline-block;
        }

        .image:hover .overlayp {
            width:250px;
            height:240px;
            background:rgba(0,0,0,0);
            position:absolute;
            top:160px;
            left:-15px;
            display:inline-block;
        }

        .hColunas {
            font-family:"Arial black";
            font-size: 13px;
            font-weight: bold;
            background-color:rgba(0,0,0,.4);
            color:#fff;
        }

        .pColunas{
            font-family:"Arial";
            font-size: 14px;
            background-color:rgba(0,0,0,.4);
            color:#fff;
        }

<div class="alimages">
          <div class="image">
             <img src="http://placekitten.com/250/200" width="220px" height="170px"/>
              <div class="overlay">
              <span class="hColunas">Confira nossas instalações</span>
              </div>
              <div class="overlayp">
              <p class="pColunas">Uma nova maneira de curtir o verão</p>
              </div>
          </div> 
          <div class="image">
              <img src="http://placekitten.com/250/200" width="220px" height="170px"/>
              <div class="overlay">
              <span class="hColunas">Confira nossas trilhas e passeios</span>
              </div>
              <div class="overlayp">
              <p class="pColunas">Uma nova maneira de curtir o verão</p>
              </div>
          </div>
          <div class="image">
              <img src="http://placekitten.com/250/200" width="220px" height="170px"/>
              <div class="overlay">
              <span class="hColunas">Confira nosso local para refeições</span>
              </div>
              <div class="overlayp">
              <p class="pColunas">Uma nova maneira de curtir o verão</p>
              </div>
          </div>
</div>