Try it Editor: Reversed hover effect

Edit This Code :

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKmI9oMQ_pha6nqhoN2MsEoDE52c9-HtYJdg2ESrpw9HQ-0xv51Tujhyqvw7Yh_bewAj21_x_4zloNouHZtMzmiswrSXs-rY6e7wqywqC4uACdZjirH7tEyo9N8lB8egxhPmxCnUvIstci/s200/img_mountains.jpg" alt="Forest" width="170" height="100">

<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>

</body>
</html>
Result :