CSS COLOR OVERLAY HOVER

David Miller

Total Post:30

Points:210
Posted by  David Miller
 1288  View(s)
Ratings:
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>

  1. Lillian Martin

    Post:27

    Points:189
    Re: CSS Color overlay hover

    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;

    }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!