Home >Web Front-end >CSS Tutorial >How to Add a Black Transparent Overlay with Text to Images on Hover Using CSS?

How to Add a Black Transparent Overlay with Text to Images on Hover Using CSS?

Barbara Streisand
Barbara StreisandOriginal
2024-12-07 10:36:17614browse

How to Add a Black Transparent Overlay with Text to Images on Hover Using CSS?

Adding a Black Transparent Overlay to Images on Hover Using CSS

Creating a black transparent overlay on an image upon hover is achievable using CSS. Here's a comprehensive guide to accomplish this:

Using a Pseudo Element

To avoid the issue with overlay elements on enclosed img elements, you can insert a pseudo element in its place. Wrap the img element as such:

<div class="image">
  <img src="image.jpg" alt="" />
</div>

Configure the CSS:

.image {
  position: relative;
  width: 400px;
  height: 400px;
}
.image img {
  width: 100%;
  vertical-align: top;
}
.image:after {
  content: '\A';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}
.image:hover:after {
  opacity: 1;
}

Adding Text on Hover

For simplicity, include text as the pseudo element's content value:

.image:after {
  content: 'Your Text';
  color: #fff;
}

Alternatively, set the text in a data-* attribute for unique text display:

.image:after {
  content: attr(data-content);
  color: #fff;
}
<div data-content="Text to Display" class="image">
  <img src="image.jpg" alt="" />
</div>

Combining Overlay and Text

Separate styling allows for independent positioning of elements:

.image:after, .image:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
.image:after {
  content: '\A';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.image:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 0;
  padding: 4px 10px;
  text-align: center;
  background: #f00;
  box-sizing: border-box;
}
.image:hover:after, .image:hover:before {
  opacity: 1;
}

The above is the detailed content of How to Add a Black Transparent Overlay with Text to Images on Hover Using CSS?. 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