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!