CODEWITHSUNDEEP
javascriptjquerycss
Andrei P
Andrei P

Reputation: 309

CSS Color overlay hover

I'm actually trying to obtain the reverse effect of this: http://jsfiddle.net/4fgnd/ I want my image to have a black overlay with some transparency, and when I hover with the mouse I'd like the overlay to dissapear.

Any thoughts please? Don't really care if it's css only or a combination between css and js.

Thanks

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.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;
}

Upvotes: 3

Views: 8007

Answers (2)

DrRoach
DrRoach

Reputation: 1356

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;
}

Upvotes: 4

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

Switch opacity state in the css :)

Working example here http://jsfiddle.net/4fgnd/1225/

.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.6);
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:0;
}

Upvotes: 1

Related Questions