HTML Element Hover Fade Effect using CSS

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

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

In this example, we do this in CSS by changing the opacity with the hover property. 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 Demo

Simple Code to Create Hover Fade Effect in CSS

This short and simple code can fade the image element by using CSS properties. In this code, we have a list of image elements. We are changing these elements’ opacity on mouse-over 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

Vincy
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