Jordan Miguel Jordan Miguel - 1 year ago 100
CSS Question

Text on image with mouseover?

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.


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

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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download