Black overlay on image hover and should remain active when we go inside the page

Question

I'm working with four images every image has a link and when clicked it take us to the another page. Now my problem is that I want to make the black overlay on hovering the image and when the image is clicked and take us to another page it remain active with that overlay.

i have four images on front page and same images on inside pages.

Here is the HTML:

<ul class="thumbnails">
    <li class="span3">
        <a href="#">
            <div id="ImageHover">
                <img src="http://209.236.116.120/~sciallin/it/backend/wp-content/uploads/2014/07/model23.png" alt="" />
            </div>
        </a>
    </li>
</ul>

Here is the CSS:

<style>
#ImageHover img:hover
{
     background-color:rgba(0,0,0,0.6);
}
</style>

its working for me but the overlay is not coming over the image.and i also want that the image remain active with overlay when we goes inside the page which is linked with this image.

the first problem is solved and when inside the page to make the image active with overlay i have done this -> Here is the HTML:

<div id="ImageHover" class="active">
<img alt="" src="http://209.236.116.120/~sciallin/it/backend/wp-content/uploads/2014/07/model23.png">
</div>

Here is the CSS:

#ImageHover.active {
    background : rgba( 0, 0, 0, 0.5 );
    bottom : 0;
    content : ' ';
    left : 0;
    position : absolute;
    right : 0;
    top : 0;
}

but it make the image dissappear.and when i block the postion it comes back but back side of image. what should i do now.

Answer 1

Replace your current CSS with the following and apply the .active class to your box.

#ImageHover {
    position: relative;
}

#ImageHover:hover:after,
#ImageHover.active:after {
    background : rgba( 0, 0, 0, 0.5 );
    position: absolute;
    top: 0;
    left: 28px;
    bottom: 15px;
    right: 28px;
    content: '';
}

I modified the position so that it outlines your box perfectly, but you can change it back if you wish.