Как показывать текст на изображении при наведении курсора?

Я пытаюсь показать описание при наведении на изображение. Я уже делал это менее чем желательно, используя спрайты изображений и зависающие здесь: http://willryan.us/design.html Я хочу, чтобы он выглядел точно так же, как у меня есть, но используя реальный текст вместо изображения.

Я пробовал несколько разных вещей, но я не могу понять, как это сделать. Я пытаюсь сделать это, используя только HTML и CSS, но я не уверен, что это возможно.

Не стесняйтесь копаться в моем коде, я приложу то, что, по моему мнению, будет relavent здесь.

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;
    }

Ответы

Ответ 1

Это просто. Оберните изображение и описание "отображаться при наведении" в div с одинаковыми размерами изображения. Затем, с некоторым CSS, закажите описание, которое будет отображаться при зависании этого 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>

Ответ 2

В своем HTML попробуйте поместить текст, который вы хотите найти в титульной части кода:

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

Вы также можете сделать то же самое для текста вашего изображения.

Ответ 3

Вы также можете использовать атрибут title в теге изображения

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

Ответ 4

Это то, что я использую, чтобы текст отображался при наведении:

* {
  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>

Ответ 5

.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>