html - How do I add an overlay effect here?CSS -

i have page:

link

on page,you find product list.i want add @ list overlay effect.

code html:

<a href="http://www.altradona.ro/lenjerie-sexy/rochii-sexy/rochie-7033-black.html" title="rochie 7033 black" class="product-image">       <img src="http://www.altradona.ro/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/1/4/1432654037.png" data-srcx2="http://www.altradona.ro/media/catalog/product/cache/1/small_image/504x504/9df78eab33525d08d6e5fb8d27136e95/1/4/1432654037.png" width="252" height="252" alt="rochie 7033 black"> </a> 

i should add effect a tag can inspect site see clearer code, sample.

i tried use css code not working:

code css:

.regular a:hover{ opacity:0.4; background:url("http://www.altradona.ro/media/wysiwyg/overlay.png"); } 

what wrong code? can please me solve problem?

thanks in advance!

here simple example how overlay works: http://codepen.io/anon/pen/gjxevo

you have have parent element has have child element position absolute in it.

you build html :

<div class="item">   <img src="src" alt="tree" />   <div class="itemoverlay"></div> <!-- overlay --> </div> 

due fact item class itemoverlay being positioned:absolute above other elements within div , create overlay effekt.

and following css magic happens :)

.item{   width:200px;   height:200px;   position:relative; } .item img{   width:100%; } .itemoverlay{   display:none;   position:absolute;   top:0;   left:0;   width:200px;   height:200px;   background-color:red; } .item:hover .itemoverlay{   display:block; }