Core Code
Core Code Modern Dev Handbook

Image Overlay Effect

Create text overlays on images using positioning.

Preview

Code

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

.container img{
width:100%;
}

.overlay{
position:absolute;
bottom:0;
background:rgba(0,0,0,0.6);
color:white;
width:100%;
text-align:center;
padding:6px;
}
</style>

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

More CSS Image Styling Examples (8)

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