Hover on Image Reveal Text
Jul 28, 2020 | CSS
<style>
.overlay-container {
position: relative;
width: 100%;
}
.overlay-image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #000000;
}
.overlay-container:hover .overlay {
opacity: 1;
}
.overlay-text {
color:#ffffff;
position: absolute;
padding:5%;
}
</style>
<div class="overlay-container">
<img src="image.png" alt="" class="overlay-image">
<div class="overlay">
<div class="overlay-text">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
Hover over an image to display text with a colored background.