---
title: "CSS Color overlay hover"  
description: "CSS Color overlay hover"  
author: "David Miller"  
published: 2014-10-31  
updated: 2014-10-31  
canonical: https://www.mindstick.com/forum/2478/css-color-overlay-hover  
category: "css-css3"  
tags: ["jquery", "javascript", "css"]  
reading_time: 1 minute  

---

# CSS Color overlay hover

I'm actually [trying](https://answers.mindstick.com/qa/93698/6-mistakes-couples-are-trying-to-save-money) to obtain the [reverse](https://www.mindstick.com/blog/63740/what-are-the-most-effective-and-safest-thanks-to-reverse-erectile-dysfunction) [effect](https://yourviews.mindstick.com/view/81363/coronavirus-effect-on-american-farms-is-severe) of this: http://jsfiddle.net/4fgnd/ I want my [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) to have a [black](https://yourviews.mindstick.com/view/83102/badi-elaichi-black-cardamom-health-benefits) [overlay](https://www.mindstick.com/blog/699/overlaying-the-action-bar-in-android-app) with some [transparency](https://www.mindstick.com/articles/336962/how-blockchain-technology-be-applied-to-improve-transparency-in-industries), and when I hover with the [mouse](https://yourviews.mindstick.com/story/5122/the-story-behind-lord-ganesha-s-mouse-mushak) I'd like the overlay to dissapear.

Any thoughts please? Don't really care if it's [css](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) only or a combination between css and js.

```
<div class="image">    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /></div><style>    .image {        position: relative;        width: 400px;        height: 400px;    }         .image img {            width: 100%;            vertical-align: top;        }         .image:after {            content: '\A';            position: absolute;            width: 100%;            height: 100%;            top: 0;            left: 0;            background: rgba(0,0,0,0.4);            opacity: 0;            transition: all 0.5s;            -webkit-transition: all 0.5s;        }         .image:hover:after {            opacity: 1;        }</style>
```

## Replies

### Reply by Lillian Martin

Here you go, simply reverse the css http://jsfiddle.net/4fgnd/1226/\

```
.image:before {    content:'\A';    position:absolute;    width:100%; height:100%;    top:0; left:0;    background:rgba(0,0,0,0.6);    opacity:0;    transition: all 0.5s;    -webkit-transition: all 0.5s;}.image:before {    opacity:1;}.image:hover:before {    opacity:0;}
```


---

Original Source: https://www.mindstick.com/forum/2478/css-color-overlay-hover

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.