How to get text over an image in css/html? [duplicate] - html

Question

This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 7 years ago.
I am new to html and css. I am trying to make a website. I have four images on a line that works as links. When you hold the mouse over them, they turn transparent. I also want a headline to show up over the transparent image when you hold the mouse over it. But when I put text there it ends up on the line over the images instead of on top of them. The text also do not appear only when the mouse is over it, but it is there all the time. Here is my css:
p2 {
color: white;
font-size: 15px;
font-family: 'Verdana';
}
img {
box-shadow: 7px 7px 4px grey;
padding-left: 18px;
padding-right 18px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
Here is the html:
<p> TITLE THAT I WANT OVER THE FIRST IMAGE </p>
<a href="LINK1">
<img border="0" src="PHOTOLINK1" width="310" height="214">
</a>
<a href="LINK2">
<img border="0" src="PHOTOLINK2" width="310" height="214">
</a>
<a href="LINK3">
<img border="0" src="PHOTOLINK3" width="310" height="214">
</a>
<a href="LINK4">
<img border="0" src="PHOTOLINK4" width="310" height="214">
</a>
Please help me if you know how to do this, thank you. <3

Answer 1

Try assigning z-index css property to text

Answer 2

You can set your top margin to a negative value.
margin-top: -100px;

Answer 3

This is wrong:
p2 {
Change it with:
p {
You need to nest all the <a>s correctly. You didn't close a lot.
And a solution for you would be, you might need to change the code a little bit:
a {
position: relative;
}
span {
position: absolute;
color: white;
font-size: 15px;
font-family: 'Verdana';
bottom: 0;
left: 0;
right: 0;
background: #000;
}
img {
box-shadow: 7px 7px 4px grey;
padding-left: 18px;
padding-right 18px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
<a href="LINK1">
<img border="0" src="PHOTOLINK1" width="310" height="214" />
<span> TITLE THAT I WANT OVER THE FIRST IMAGE </span>
</a>
<a href="LINK2">
<img border="0" src="PHOTOLINK2" width="310" height="214" />
</a>
<a href="LINK3">
<img border="0" src="PHOTOLINK3" width="310" height="214" />
</a>
<a href="LINK4">
<img border="0" src="PHOTOLINK4" width="310" height="214" />
</a>

Answer 4

You can use position:absolute and put <p> child of <a> with a class
CSS
p2{
color: white;
font-size: 15px;
font-family: 'Verdana';
}
img {
box-shadow: 7px 7px 4px grey;
padding-left: 18px;
padding-right 18px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
}
.LINK1 p {
position: absolute;
top: 20px;
padding: 0px 20px;
}
HTML
<a href="LINK1" class="LINK1">
<p> TITLE THAT I WANT OVER THE FIRST IMAGE </p>
<img border="0" src="PHOTOLINK1" width="310" height="214">
</a>
<a href="LINK2">
<img border="0" src="PHOTOLINK2" width="310" height="214">
<a href="LINK3">
<img border="0" src="PHOTOLINK3" width="310" height="214">
<a href="LINK4">
<img border="0" src="PHOTOLINK4" width="310" height="214">
</a>
Note: Adjust your needs
DEMO HERE