Home » Html » How to show text on image when hovering?

How to show text on image when hovering?

Posted by: admin November 24, 2017 Leave a comment

Questions:

I’m trying to show a description when hovering over an image. I’ve already done it in a less than desirable way, using image sprites and hovers here: http://willryan.us/design.html I want it to look exactly like how I have it, but using real text instead of an image.

I’ve tried a few different things but I can’t seem to figure out how to do it. I’m trying to do it using HTML and CSS only, but I’m not sure if that’s possible.

Feel free to poke around in my code, I’ll paste what I think is relavent here.

HTML

<div id="projectlist">
                <div id="buzzbutton"><a  href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a></div>

                <div id="slinksterbutton"><a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a></div>             
</div>

CSS

div#projectlist {
    width: 770px;
    margin:0 auto;
    margin-top:20px;
    margin-bottom:40px;
}

div#buzzbutton {
        display:block;
        float:left;
        margin:2px;
        background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
        width: 150px;
        height: 150px;
    }

    div#buzzbutton:hover {
        background:url(content/assets/thumbnails/design/buzz_sprite.jpg);
        width:150px;
        height:150px;
        background-position:0 -150px;
    }

div#slinksterbutton {
        display:block;
        float:left;
        background:url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
        width: 150px;
        height: 150px;
        margin:2px;
    }

    div#slinksterbutton:hover {
        background:url(content/assets/thumbnails/design/slinkster_sprite.jpg);
        width:150px;
        height:150px;
        background-position:0 -150px;
    }
Answers:

It’s simple. Wrap the image and the “appear on hover” description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div.

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}
<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

A nice fiddle: https://jsfiddle.net/govdqd8y/

Questions:
Answers:

In your HTML, try and put the text that you want to come up in the title part of the code:

<a  href="buzz.html" title="buzz hover text">

You can also do the same for the alt text of your image.

Questions:
Answers:

You can also use the title attribute in your image tag

<img src="content/assets/thumbnails/transparent_150x150.png" alt="" title="hover text" />

Questions:
Answers:

This is what I use to make the text appear on hover:

* {
  box-sizing: border-box
}

div {
  position: relative;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center
}

img {
  width: 400px;
  height: 400px;
  position: absolute;
  border-radius: 50%
}

img:hover {
  opacity: 0;
  transition:opacity 2s;
}

heading {
  line-height: 40px;
  font-weight: bold;
  font-family: "Trebuchet MS";
  text-align: center;
  position: absolute;
  display: block
}

div p {
  z-index: -1;
  width: 420px;
  line-height: 20px;
  display: inline-block;
  padding: 200px 0px;
  vertical-align: middle;
  font-family: "Trebuchet MS";
  height: 450px
}
<div>
  <img src="https://68.media.tumblr.com/20b34e8d12d4230f9b362d7feb148c57/tumblr_oiwytz4dh41tf8vylo1_1280.png">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing <br>elit. Reiciendis temporibus iure dolores aspernatur excepturi <br> corporis nihil in suscipit, repudiandae. Totam.
  </p>
</div>

Questions:
Answers:
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head></head>
<body>

<div class="container">
  <img src="http://lorempixel.com/500/500/" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

Reference Link W3schools with multiple styles

Leave a Reply

Your email address will not be published. Required fields are marked *