Home >Web Front-end >CSS Tutorial >How to Create an Image Overlay with CSS and HTML?

How to Create an Image Overlay with CSS and HTML?

Barbara Streisand
Barbara StreisandOriginal
2024-11-03 07:07:03397browse

How to Create an Image Overlay with CSS and HTML?

Placing an Overlay on an Image Using CSS

Achieving the effect of overlaying a dark color with text and an icon over an image on hover can be accomplished with the following CSS and HTML:

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}
<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>

Here's a live demo: http://jsfiddle.net/6Mt3Q/

Customizing the Overlay with Additional Styling

To enhance the appearance of the overlay, you can add extra styling as follows:

<code class="css">.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}</code>
<code class="html"><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom">
            <i class="fa fa-search"></i>
        </span>
    </div>
</div></code>

The above is the detailed content of How to Create an Image Overlay with CSS and HTML?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn