How to Show Text on Image When Hovering

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>

Creating a text overlay when hovering over image

Is this what you are looking for.

 .home-body .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center !important;
            margin: 5em 0 0 0;
        }

        .home-body img {
            margin: 5px;
            transition: all 1s;
        }

        .home-body img:hover {
            transform: scale(1.05);
            transition-duration: .3s;
            filter: grayscale(20%);
            opacity: 90%;
            cursor: pointer;
        }

        .product-item {
            background-color: #212121;
            margin: 5px;
            position: relative;
        }

        .home-body a .hover-text {
            display: none;
        }
        .home-body a:hover .hover-text {
            display: block;
            position: absolute;
            text-align: center;
            color: #fff;
            left: 10%;
            top: 50%;
        }

<body class="home-body">
<div class="container">

        <div class="product-item">
            <a href="products.html"><img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
    <div class="hover-text">
        <h3>Gaming PC</h3>
        <p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
    </div>
            </a>
        </div>

        <div class="product-item">
            <a href="products.html"><img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
                <div class="hover-text">
                    <h3>Gaming PC</h3>
                    <p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
                </div>
            </a>
        </div>
        <div class="product-item">
            <a href="products.html"><img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
                <div class="hover-text">
                    <h3>Gaming PC</h3>
                    <p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
                </div>
            </a>
        </div>

</div>
</body>

Displaying a text data while hovering over the image [React Functional Component]

As you want to show text when you hover over image you should call mouse events on img tag as follows. Also change data type of hover state to boolean.

const [hover, setHover] = useState(false); // initial false

  const HoverData = "Click or pinch to Zoom Image";

  const onHover = (e) => {
    e.preventDefault();
    setHover(true); // turn true
    console.log("hovered");
  };

  const onHoverOver = (e) => {
    e.preventDefault(); // turn false
    setHover(false);
  };
  return (
    <div className="flex_center py-5">
      {/* if hover is true then only show the text */}
      {hover && <p className={hover}>{HoverData}</p>}
      <img
        onMouseEnter={(e) => onHover(e)}
        onMouseLeave={(e) => onHoverOver(e)}
        alt=""
        src="some image link"
        className="img-responsive"
      />
    </div>
  );

Refer the link for preview: https://codesandbox.io/s/image-hover-st3x3w?file=/src/App.js

On image hover, cover original image and display text

For the transparent color overlay you can use a pseudo-element like :after on the li. That way it will always stay on top of the li and on the img.
The img should have a max-width:100% so it won't overflow it's parent ( li ).

And then, there is some styling involved which is pretty straight forward. You could also add some animations on how the blueish overlay should appear, but that's up to you.

If you have any questions, please ask in comments.

.img-wrap {  position: relative;  height: 360px;  width: 360px;}
img {  max-width: 100%;  height: auto;}
.img-wrap ul {  padding: 0;}
.img-wrap li {  position: relative;}
.img-wrap .img-description {  position: absolute;  opacity: 0;  z-index: 2;  transition: 0.3s ease-out;  top: 50%;  transform: translate(-50%, -50%);  left: 50%;  width:auto;}
.img-wrap li .img-description h2 {  margin-bottom: 50px;}
.img-wrap li .img-description a {  padding: 10px;  color: #fff;  border: 1px solid #fff;}
.img-wrap li:after {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  background: rgba(29, 106, 154, 0.72);  color: #fff;  visibility: hidden;  opacity: 0;  transition: opacity .2s, visibility .2s;  height: 100%;  width: 100%;  content: "";}
.img-wrap:hover li:after {  visibility: visible;  opacity: 1;}
.img-wrap:hover .img-description {  opacity: 1;}
ul {  list-style-type: none;  margin: auto;}

<div class="img-wrap">  <ul class="clearfix">    <li>      <img src="https://cdn2.hubspot.net/hubfs/1878396/LR%20-%20Landing%20page%20images/LR%20-%20Scottish%20Campaign/large-cta.png?t=1528962213286" />      <div class="img-description">        <h2>          TEST        </h2>        <a>Test link</a>      </div>    </li>  </ul></div>

Display an image while hover on a text

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

Example

picture on hover show text under it

If I understand correctly, what you are trying to achieve when the the image is hovered it will do the following:

Image will 'move' upwards
Text will display below

There are several ways to achieve this, what I would do is:

Wrap your image and text, this way the hover event can cover the elements inside:

  <div class='wrapper'>
   <img src="pics/ii.jpg" class="crd_1">
   <p class="crd1">hskgnskg<br>kdjfehbdbdgdf<br>jdbhfkdf</p>
  <div/>

Set your texts 'p' tags to hidden: display:none
Target the elements accordingly under wrapper like so:

.wrapper:hover image {
    transform: translateY(-35px);
    height: 320px;
    padding-bottom: 120px;
}
.wrapper:hover p {
    display: unset;
}

Display image over text on hover

You can give the image the following:

position: absolute;
z-index: 100; 
.. and set margin based on what you want

Just make sure you apply these seetings only to the sidebar images.

How to Show Text on Image When Hovering