Show Text When the Cursor Hovers Over an Image

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>

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="">
      <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>

Hover over text and show a image

So it looks like they have <a> tags that react when you hover over them. This can be done with JavaScript or CSS, but what you need to use depends on what you want the reaction to be.

If you want to make the image show up around your cursor like it does on those websites, you have to either use an event listener or a cursor like someone else said. That being said, the websites shown didn't use a cursor, because I can still see my normal pointer cursor there.

Here's how I did it with JavaScript and a bit of CSS (the image shows up and moves with your cursor, and disappears when you stop hovering over the link).

HTML:

<div id="container">
  <a href="" data-src="road.png" class="hover">
    <h1>Hover here!</h1>
  </a>
</div>

Make sure your href is the link you want people to go to when they click it. If you don't want a link (I assumed you do because both websites you showed have them), just change it to a <div> or something.
The data-src attribute here is really important, because it tells the JavaScript what picture to use. There are other ways to do this, but I personally like the dataset the best for sharing small element-specific bits of information between the HTML and the JavaScript. It doesn't really matter what you call it, as long as it starts with "data-" (eg data-image or data-href).

CSS:

#container {
  position: relative;
}
.followMouse {
  z-index: -1;
  position: absolute;
}

followMouse is going to be the class we add to the image when it's shown. I gave it a z-index of -1 so it shows behind the other elements on the page (like in your examples). I also made its position absolute. This is very important. This is what allows us to set its coordinates, and what stops it from messing up other styling on the page. And in order to make sure that works, it's always a good idea to set its parent element (in this case, the element with the id "container") to a relative position.

Now for the fun part! Here are the JavaScript event listeners that make it work:

for (let el of document.querySelectorAll('.hover')) {
  let image = new Image();
  image.src = el.dataset.src;
  image.className = "followMouse";
  el.addEventListener('mouseover',(e)=>{
    document.getElementById('container').append(image);
    image.style.left = `${e.x - (image.width/2)}px`;
    image.style.top = `${e.y - (image.height/2)}px`;
  })
  el.addEventListener('mouseout',(e)=>{
    image.remove();
  })
}
window.addEventListener('mousemove',(e)=> {
  let image = document.querySelector('.followMouse');
  if (image) {
    image.style.left = `${e.x - (image.width/2)}px`;
    image.style.top = `${e.y - (image.height/2)}px`;
  }
})

I used document.querySelectorAll to get all elements with 'hover' as their class, in case you want to do this with multiple elements.
To get that data-src attribute, I called for the element's dataset. Basically, do el.dataset. and then whatever you had after the dash (but if it had dashes in it in your HTML, now use camelCase).
Then I loaded an image with that attribute as its source and followMouse as its class (which has to be called className in JavaScript because class is already a thing). I didn't append it to the document yet, because then it would show up before the user hovers over the tag.
For every element with the 'hover' class, I then added two event listeners: one adds the image to the container when the mouse is over the element, and one removes the image when the mouse is moved away. In the former, I also changed the style property of the image so that its coordinates are half its width left of the mouse and half its height above the mouse--basically, it'll show up with the mouse in the center of it.
Since I had to call its 'left' and 'top' CSS attributes from the CSS style of the element, I had to pass in a string with the type of number I was sending. Eg, in the CSS it would be this:

el {
  left: 10px
}

So I need to send in a string like "10px" to the CSS. To do this, I use `` instead of normal double or single quotes so that I can define a string with variables or JavaScript inside of it (the ${insert js here}).

Finally, I added an event listener to the window as a whole to listen for the mouse moving. This time I just called querySelector instead of querySelectorAll because there should only be one element with that class at a time. All this event listener does is check if the image exists (aka if you're hovering over an element that does this stuff), and if it does, update the position of the image so the cursor is still in the center of it.