CSS COLOR OVERLAY HOVER

David Miller

Total Post:30

Points:210
Posted by  David Miller
 1623  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;
    }

      Modified On Apr-06-2018 02:06:07 AM

Answer

NEWSLETTER

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