Home > DeveloperSection > Forums > CSS Color overlay hover
David Miller

Total Post:30

Points:210
Posted on    October-31-2014 1:18 AM

 CSS-CSS3 JQuery  JavaScript  CSS 
Ratings:


 1 Reply(s)
 940  View(s)
Rate this:

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.

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



Lillian Martin

Total Post:27

Points:189
Posted on    October-31-2014 1:20 AM

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;

}


Don't want to miss updates? Please click the below button!

Follow MindStick