Text on image with mouseover?

Question

I want to display text on the image when a mouser hovers over it (without using JS), I've tried playing around with the html/css and had a look on stackoverflow, still cant find a way to implement this feature. Anyone have an idea? Once again thanks for the help.

The fact there is already text (h2) beneath the image is confusing me, I tried to use this method (Text on image mouseover?) and failed.

HTML

<ul class="portfolio">
    <li class="project option-1">
        <div class="project-image">
            <a href="default.asp"><img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"/>
        </div>
        <div class="project-info">
            <h2 class="project-info-title">Cricket Journey</h2>
            </a>
        </div>
    </li>

I am not displaying the CSS because I already have an idea of how to implement the HTML aspect of this function, but not the CSS

kzhao14 · Accepted Answer · 2016-11-17T00:15:06.990

2

If I understand correctly, you want text to display over an image when the image is hovered over. If so, then display the <p> (which is right after the image) when the image is hovered over as follow:

p {
  /* position the text */
  position: absolute;
  left: 0px;
  display: none;
  width: 300px;
  text-align: center;
  margin: 0;
  height: 20px;
  top: 140px;
  
}
img {
  position: absolute;
  left: 0;
  top: 0;
}
img:hover + p {
  display: block;
}

<img src="/favicon.ico" height="300">
<p>some text to display here</p>

EDIT: Centered text

edited Nov 17 '16 at 00:15

answered Nov 16 '16 at 23:46

kzhao14

2,470
14
21

wow, thanks a lot. Thats basically fixed it, however the text is displayed slightly over my image, how can I ensure that it is shown in the center? – Jordan Miguel Nov 16 '16 at 23:57
You can set the width of the `p` and set `text-align` to center, which will center the text. – kzhao14 Nov 16 '16 at 23:57
I added it into the original post. – kzhao14 Nov 16 '16 at 23:59
thanks, but the text still seems to be higher then my image. perhaps thats due to my image height? – Jordan Miguel Nov 17 '16 at 00:07
This is because the `p` had a margin. Set the margin to 0 to put it at the top of the image. – kzhao14 Nov 17 '16 at 00:10
You can set its `top` attribute to half the height of the image minus half the height of the `p`. – kzhao14 Nov 17 '16 at 00:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/128309/discussion-between-jordan-miguel-and-k97513). – Jordan Miguel Nov 17 '16 at 00:28

Text on image with mouseover?

1 Answers1