Core Code
Core Code Modern Dev Handbook

Image Opacity Effect

Opacity can create subtle image effects.

Preview

Code

<style>
img{
width:140px;
opacity:0.7;
}

img:hover{
opacity:1;
}
</style>

<img src="https://via.placeholder.com/140">

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 Overlay Effect open example example Hover Overlay open example example Grayscale Hover Effect open example