Core Code
Core Code Modern Dev Handbook

CSS Opacity Transition

Opacity transitions create smooth fade effects.

Preview

Code

<style>
.box{
background:#2563eb;
color:white;
padding:15px;
opacity:0.5;
transition:opacity 0.3s;
}

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

<div class="box">Hover fade</div>

More CSS Opacity Examples (7)

example CSS Opacity Basic open example example CSS Opacity Levels open example example CSS Opacity Hover Effect open example example CSS Image Opacity open example example CSS Overlay With Opacity open example example CSS Opacity vs RGBA open example example CSS Card Hover Opacity open example