Creating a text overlay when hovering over image

Question

I have these images in a simple responsive grid that I am trying to add an overlay for. When I hover on an image, id like to have 3 or 4 lines that give a general description. By default, the images show, and when I hover id like the text to appear ~ how might I do this?

Here is the current code that I have

    <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=" "></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=" "></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=" "></a>
    </div>
</div>

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

And here is what I think I could do, but dont know how to implement it with html/css

        <div class="container ">
          <img src="img.jpg" alt=" ">
           <div class="overlay-text">
            <h3>Random Title</>
              <p>Random description</p>
              <p>Random description</p>
              <p>Random description</p>
            </div
        </div>

This link should also answer your question. https://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering — Chaiya Tantisukarom, Sep 23 '20 at 10:02

JKD · Answer 1 · 2020-09-23T10:06:34.960

The simplest solution would be to:

Add 4 text tags which are used for the description you mentioned and assign a class to them.
Add display: none; to the class.
Add, for instance, display: block; to :hover of your class.

HTML:

        <div class="container ">
          <img src="img.jpg" alt=" ">
           <div class="overlay-text">
            <h3>Random Title</>
              <p>Random description</p>
              <p>Random description</p>
              <p>Random description</p>
            </div
        </div>

CSS:

.overlay-text {
    display: none;
}

.overlay-text:hover {
    display: block;
}

Additionally:

If you want your image to be the background of the div, then remove

<img src="img.jpg" alt=" ">

from your HTML and add this to your overlay-text class in CSS:

background-image: url("img.jpg");

You want the text only to appear on hover, right? Therefore you hide the text and only show it on hover. That means, your approach above was right. You only need to add the CSS I added. — JKD, Sep 23 '20 at 10:03

score 0 · Accepted Answer · answered Sep 23 '20 at 12:04

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>

Creating a text overlay when hovering over image

2 Answers2