Hover Overlay

Preview

Code

<style>
.container{
position:relative;
width:160px;
}

.container img{
width:100%;
}

.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
color:white;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:opacity 0.3s;
}

.container:hover .overlay{
opacity:1;
}
</style>

<div class="container">
<img src="https://via.placeholder.com/160">
<div class="overlay">Hover Text</div>
</div>

More CSS Image Styling Examples (8)

Image Border Rounded Image Circular Image Image Shadow Image Hover Scale Image Opacity Effect Image Overlay Effect Grayscale Hover Effect