Put a <span class="hoverImg"> </span> right under the <img> element in the code you have provided.

Then all else should be made with CSS.

Add to .itemImageBlock a, a position:relative;
and the css for the hoverImg

.itemImageBlock a span.hoverImg {opacity:0; width:100%; height:100%; display:block; position:absolute;top:0;left:0;background:#000;}
.itemImageBlock a:hover span.hoverImg {opacity:0.4;}

If you want to remove the current effect from your image, remove the css

.itemImageBlock:hover img{
-webkit-transform:scale(1.06);
-moz-transform:scale(1.06);
-ms-transform:scale(1.06);
-o-transform:scale(1.06);
transform:scale(1.06);}

thank you for your help! I've done this on localhost and it works a treat!!

One last problem I have is it works on individual item page - but not on the category list... any ideas where I'd put <span class="hoverImg"></span> ??

Thank you for your help!

Just locate the similar block of catItemImageBlock in category_item.php and put it right under the img of that block. Then adjust the css to work on the listing as well.

Hi, yeah I tried that - but it doesn't seem to work - the <a class="itemImage" is different, in the item it reads <a class="modal" - would that have anything to do with it?