0
How do I tag h3
and a p
in the same image, but I want to tag p
down as a footer
and the h3
at 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>
What do you mean, together? You want H3 to be on a line and P on the bottom line, but when you pass the mouse on the image H3 and P stay on the same line is that it? Would you have any image of the layout of how you want it to look? Your code is a bit confusing.
– hugocsl
In case, I have an image that when I hover over it,I want to know if it is with padding that I make this correction in my image.
– J. Moura
Now I think I get it. The padding is not the best option for this, because with it vc will depend on a fixed value, and if any of your images is bigger P will not stay on the desired login. As you have two elements the H3 and the P vc can use position:Absolute, and top:0 in the H3 and in the P vc poloca bottom:0. I will give a simple example and put in the answer
– hugocsl