How to get text over an image in css/html?

Question

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

Put what you have in https://jsfiddle.net/ so someone can modify and everyone can see the working solution. — JoshNaro, Dec 10 '15 at 15:33

score 0 · Answer 1 · answered Dec 10 '15 at 15:30

0

Try assigning z-index css property to text

answered Dec 10 '15 at 15:30

Akshey Bhat

8,227
1
20
20

score 0 · Answer 2 · answered Dec 10 '15 at 15:33

0

You can set your top margin to a negative value.

margin-top: -100px;

answered Dec 10 '15 at 15:33

coding

71
2
10

score 0 · Answer 3 · answered Dec 10 '15 at 15:33

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>

Luís P. A. · Answer 4 · 2015-12-10T15:47:36.170

0

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

edited Dec 10 '15 at 15:47

answered Dec 10 '15 at 15:33

Luís P. A.

9,524
2
23
36

`p2 {` is it even valid? – Praveen Kumar Purushothaman Dec 10 '15 at 15:44
@PraveenKumar, i really don´t know if the OP as a class `.p2` on his project but is valid class. In the HTML present by OP there is no such class. Does not affect the solution. But thanks ;) – Luís P. A. Dec 10 '15 at 15:50
Thats' what I am telling. We can just let the OP understand it is wrong right? – Praveen Kumar Purushothaman Dec 10 '15 at 15:52

How to get text over an image in css/html?

4 Answers4