Display Text on Mouseover for Image in HTML

Display text on MouseOver for image in html

You can use title attribute.

<img src="smiley.gif"  title="Smiley face"/>

You can change the source of image as you want.

And as @Gray commented:

You can also use the title on other things like <a ... anchors, <p>, <div>, <input>, etc.
See: this

How to show text on image when hovering?

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>

Display image when hover over text

The best way is that you just use jQuery.

Link the jQuery library to your project, place it inside header tag
Follow the code

$(".Your_class").mouseenter(function(){
        if ($(this).parent('div').children('div.image').length) {
            $(this).parent('div').children('div.image').show();
        } else {
            var image_name=$(this).data('image');
            var imageTag='<div class="image" style="position:absolute;">'+'<img src="'+image_name+'" alt="image" height="100" />'+'</div>';
            $(this).parent('div').append(imageTag);
        }
    });

    $(".Your_class").mouseleave(function(){
        $(this).parent('div').children('div.image').hide();
    });

<html>
<head>
<title>Bikash Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>
    <a class="Your_class" href="#" data-image="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">Show Image</a>
</div>
<div style="margin-left:250px;">
    <a class="Your_class" href="#" data-image="https://i.stack.imgur.com/q1b4w.jpg?s=64&g=1">Another Image</a>
</div>
</body>
</html>

Display an image while hover on a text

img { display: none; }    
.parent:hover img { display: block; }

Example

Displaying text on mouse hovering over image

Put your .middle div inside the same container as your image, then select it on hover by using adjacent sibling CSS selector

.card-img-top {
  min-height: 0.1px;
}

img.img-thumbnail {
  border: 1px solid #e4c9c9;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  pointer-events:none;
}

.text {
  background-color: #04aa6d;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.img-thumbnail:hover {
  opacity: 0.3;
}

.img-thumbnail:hover+.middle {
  opacity: 1;
}

<div class="list-group-item">
  <div class="row">
    <div class="col-12 col-md-4 vertical-center-col">
      <img class="img-thumbnail" src="https://www.gardendesign.com/pictures/images/675x529Max/site_3/helianthus-yellow-flower-pixabay_11863.jpg" alt="Sample Image">
      <div class="middle">
        <div class="text">Image Copyright</div>
      </div>
    </div>
    <div class="col-12 col-md-8 mt-2 mt-md-0">
      <strong>Employee name</strong>
    </div>
  </div>
</div>

Text on image with mouseover?

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>

Display Text on Mouseover for Image in HTML