Simple Hover Fade Effect Using jQuery

by Vincy. Last modified on July 6th, 2023.

In this tutorial, we will use jQuery to apply the fading effect on an image element. In the previous tutorial, we have seen the list of jQuery fading methods.

In this example, we are using fading effect on the mouse-over and mouse-out events of the image elements. In this event, the jQuery fadeTo() function is called by passing the appropriate image opacity.

View Demo

HTML Image Element with Mouse-Over Mouse-Out Event

This code contains a list of image elements with a mouse-over and mouse-out function call.

<img src="fading-photo.png" onMouseOver="fade(this,0.4)"
	onMouseOut="fade(this,1)" />
<img src="fading-photo1.png" onMouseOver="fade(this,0.4)"
	onMouseOut="fade(this,1)" />
<img src="fading-photo2.png" onMouseOver="fade(this,0.4)"
	onMouseOut="fade(this,1)" />

jQuery Hover Fading Effect

This simple code creates a hover fading effect on an HTML image element.


function fade(obj, opacity) {
	$(obj).stop().fadeTo('slow', opacity);

View DemoDownload

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

↑ Back to Top

Share this page