CSS Fade on Hover

Glenn Glenn's Blog, Uncategorized 0 Comments

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

[css]

.item {
height:200px;
width:200px;
background:red;
-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;
}

[/css]
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

Glenn

A highly experienced WordPress Web Developer, Front-end and 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.

Leave a Reply

Your email address will not be published. Required fields are marked *