HTML Element Hover Fade Effect using CSS

by Vincy. Last modified on July 12th, 2022.

In the previous tutorial, we have seen about how to apply the fade-in fade-away effect on an HTML element using jQuery. In this tutorial, we are going to replicate the same effect without using jQuery or any other Javascript functions.

In this example, we are doing this in CSS by changing the opacity with hover property. By using CSS, the fade effects can not be provided with the jQuery slow, fast animation effect as we have in the previous tutorial demo.

View DemoDownload

Simple Code to Create Hover Fade Effect in CSS

This short and simple code can do the image element fading by using CSS properties. In this code, we are having a list of image elements. We are changing these elements opacity on mouse-over by using the CSS hover property.

<html>
	<head>
		<title>HTML Element Hover Fade Effect using CSS</title>
		<style>
		.fadding-photo:hover { opacity:0.4;}
		</style>
	</head>
	<body>
		<img class="fadding-photo" src="fading-photo.png" />
		<img class="fadding-photo" src="fading-photo1.png" />
		<img class="fadding-photo" src="fading-photo2.png" />
	</body>
</html>

View DemoDownload

↑ Back to Top

Share this page