Is this pure JavaScript?

It uses JavaScript to toggle classes, but relies on CSS Transitions for the smooth animation, which is much more performant than pure JS loops.

Does it work on mobile?

Yes, CSS transitions are hardware accelerated and work perfectly on mobile devices.

Image Fade Effect

Add elegance to your site with a simple fade-in/fade-out effect on hover or click.

Hover over the image above.

Copy the Script

<style>
.fade-item {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}
.fade-item:hover {
  opacity: 0.5;
}
</style>

<!-- Apply the class to your image -->
<img src="image.jpg" class="fade-item" alt="Fading Image">