Breaking News: Grepper is joining You.com. Read the official announcement!

text hover effects on image in css

Frail Fly answered on July 27, 2024 Popularity 5/10 Helpfulness 3/10

answer text hover effects on image in css

text hover effects on image in css

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            position: relative;
            overflow: hidden;
        }
        .container img{
            width: 100%;
            height: auto;
        }
        .container:hover .t{
            top: 0;
        }
        .t{
            color: white;
            background-color: rgba(0,0,0,0.8);
            position: absolute;
            top: -100%;
            height: 100%;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            transition: all 0.4s;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="./photo-1619266465172-02a857c3556d.jpg" alt="">
        <div class="t">
            <h2>Volcano</h2>
            <p>This is a picture of Volcano. Beware, they are hot!</p>
        </div>
    </div>
</body>
</html>

Popularity 5/10 Helpfulness 3/10 Language typescript

Source: www.naukri.com

Tags: css effects hover image text typescript

Link to this answer
Share Copy Link

Contributed on Jul 27 2024

Frail Fly

0 Answers Avg Quality 2/10

text hover effects on image in css

Contents

More Related Answers

text hover effects on image in css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.