I have an image on a web page that I want to display a text message whenever the mouse pointer hovers over the image. For example, I want to display the text “Placeholder Image” whenever the mouse pointer hovers over the image.

The image itself is round with a blue border. This was styled with a CSS class called “bio-photo”, which uses a border-radius: 50%; to make the image round. For this example, I set a default width variable set to 400px. Here is the CSS to create the round image.

:root {
  --width: 400px;
}

.bio-photo {
  border-radius: 50%;
  border: 20px solid #1565C0;
  display: block;
  width: var(--width);
  height: auto;
}

And the HTML used to place this image on the page:

<img  src="http://bluegalaxy.info/images/sea_captain.jpg" class="bio-photo">

Now to get the functionality of having a text message appear over the image on hover, I had to create three more div classes, which I called “img-hover”, “overlay”, and “hover-text”.  The image tag needs to be placed inside the “img-hover” div, followed by the “overlay” div, which has the “hover-text” div nested inside it. Here is the complete HTML:

<div class="img-hover">
   <img  src="http://bluegalaxy.info/images/sea_captain.jpg" class="bio-photo">
   <div class="overlay">
      <div class="hover-text">Placeholder Image</div>
   </div>
</div>

Here is the complete CSS:

:root {
  --width: 400px;
}

.bio-photo {
  border-radius: 50%;
  border: 20px solid #1565C0;
  display: block;
  width: var(--width);
  height: auto;
}

.img-hover {
  position: relative;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: var(--width);
  opacity: 0;
  transition: .5s ease;
  background: rgba(0,0,0,0.25);
  border-radius:50%;
  border: 20px solid #1565C0;
}

.img-hover:hover .overlay {
  opacity: 1;
}

.hover-text {
  color: black;
  font-size: 3em;
  font-family: Ubuntu;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

Here is what the result looks like on Codepen:

See the Pen Text on image hover – circular image by Chris Nielsen (@Chris_Nielsen) on CodePen.