How to put a h3 and p tag inside a class

Question

How to put a h3 and p tag inside a class

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

How do I put a h3 tag and a p in the same image, however I want to put the p tag down as a footer and h3 on the top of the image when hovering the mouse on 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>

html html5 css css3

asked by anonymous 07.04.2018 / 16:00

2 answers

Display all awesome font icons on my website? How to insert a new div and stack them after clicking a button

score 2 · Answer 1

As quoted by colleague, do not use id, use class. The id must be unique among all elements, so your HTML would actually be wrong.

You can use direct as you did your HTML, with the image, h3 eop inside a container div, but to facilitate the positioning of texts, I think it is more interesting with an extra div for each part of the text, is low. See the two 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"/><divclass="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"/><h3class="top">Gato 2</h3>
  <p class="bottom">Direto só com as tags</p>
</div>

score 0 · 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've changed h3 to span so that the texts are compatible with the size of the images in that presentation.

The main idea is how to make the two texts appear in 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>