Black Transparent Overlay On Image

I'm trying to get a light black overlay on the image when you hover on it (like the text) sorry I'm new to css and HTML! help would be appreciated HTML

<

Solution 1:

This can be done with :before or :after

#box1{
  position:relative;
}

#box1:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:black;
    opacity:0;
    z-index:0;

}

#box1:hover:before{
 opacity:.6;   
 transition: all 0.5s;
}

#box1 > *{
    position:relative;
    z-index:1;
}

http://jsfiddle.net/4bo4zju7/3/

Solution 2:

CS3 is great! You no longer need JS for simple rollover effects. Gopalraju's above code should work and so does my example below. You can have a fiddle with it and use the code as you see fit.

The parent div, has a black page background, and the imgdiv changes everything inside it to a opacity by 50% on the mouse rolling over the div. In this case the image is inside the div.

There are a few ways of doing this. This is just another one to ad into the mix. Good luck.

.parentdiv {
    background-color:#000;
    height:100%;
    width:100%;
    }

    .imgdiv {
      padding:30px;
    }

    .imgdiva{
    	opacity: 1;
    	filter: alpha(opacity=100);
     	-webkit-transition: opacity 0.5s linear;
    }

    .imgdiva:hover {
    	opacity: 0.5;
    	filter: alpha(opacity=50);
     	-webkit-transition: opacity 0.5s linear;
    }

<divclass="parentdiv"><divclass="imgdiv"><ahref="http://www.domain.com.au/link.html"><imgsrc="http://placehold.it/350x150"alt="image"height="150"width="350"></a></div></div>

Share