display text on an image when a mouse hovers over it?

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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

display text on an image when a mouse hovers over it?

Sign up