Simple CSS Image Mask

This is a simple task but nether the less worth documenting.  The aim is to create a mask over the top of an image when hovering over them or selecting them.

The images above show the two states, the first the idle state and the second the border masked state.  Obviously these are both images, however, this actual example will be carried out purely with CSS.

I have knocked up a quick demo of the Simple CSS Image Mask.

code

HTML Code

The HTML simply consists of a div container with a class of mask applied  wrapping  a linked image.

CSS Styles

The CSS is also fairly simple.  Widths and heights are applied to the a tag.  Active and hover states are then set on the a tag and the img tag.  A border of six pixels is applied to the a tag and a width and height reduced by 12 pixels  to cater for the extra size produced by the border and finally an overflow of hidden is applied to "mask" the image.  The last step is pull the active image acroos to the left and up by 6 pixels to create the illusion that the image is being masked.

demo

The demo can be found at the following link: Simple CSS Image Mask.