CSS Fade on Hover

A quick pure CSS snippet to fade an element on hover:-

.item {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opactiy 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;

.item:hover {
transition: none;
-o-transition: none;
-ms-transition: none;
-moz-transition: none;
-webkit-transition: none;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;

Just add your Div, which in this case is ‘Item’.

About the Author
CSS Fade on Hover CSS Fade on Hover 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.