Text on Image Mouseover

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>

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>

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>

Add text to image when mouse over

Simply in CSS:

.one:hover::after {
content:"Text when hovered";
position:absolute;
left:0;
}

<div class="container">
    <div class="one">
        <input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" />
    </div>
</div>

JDFiddle

EDIT: + one with glowing effect perhaps

JSFiddle

Insert text over an image and change the text by hovering the mouse over (JavaScript)

for such an assignment you don't need javascript

let it browser do for you with #pureCss

(using javascript for manipulating with DOM or changing classes on divs are unnecessary overkill)

you can add whatever animation with higher performance (using css)

.image.fit{
  /* block capabilities, but still next to each other */  
  display: inline-block;
  /* be the parent for position absolute later */
  position: relative;
}

.image.fit .normal, .image.fit .hover {
  /* position of the box */
  position: absolute;
  bottom: 5%;
  left: 5%;
  right: 5%;

  /* nice box with padding even for multiline */
  background-color: rgba(255,255,255,0.6);
  padding: 5%;
  text-align: center;
  font-family: Arial;
  color: #333;

  /* animate fade, rather than blinking */
  transition: opacity 0.5s;
}

.image.fit .normal {
  opacity: 1; /* visible by default */
}
.image.fit:hover .normal {
  opacity: 0; /* not visible on hover */
}

.image.fit .hover {
  opacity: 0; /* not visible by default */

  /* optional position on top (remove, for the same place) */
  top: 5%;   
  bottom: auto;
}
.image.fit:hover .hover {
  opacity: 1; /* visible on hover */
}

<div class="col-4 col-6-medium col-12-small">
    <a href="#" class="image fit">
        <img src="https://picsum.photos/id/1015/300/150" alt="Sample Image">
        <div class="normal">water</div>
        <div class="hover">you can go tomorrow, tickets available</div>
    </a>
    <a href="#" class="image fit">
        <img src="https://picsum.photos/id/1016/300/150" alt="Sample Image">
        <div class="normal">rocks</div>
        <div class="hover">Lorem Ipsum: Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</div>
    </a>

</div>