CSS3 hover mask effects

With css3 transition, the pictures change the border style and scales,whichc looks like the mask layer effects.

Step1:
link the bootstrap.css and font-awesome.css(id you want to use font-awesome icon)

Step2:
html

.box-content is the mask layer content. and inner is the descriptions of pictures.

icon is from font-awesome with “fa” class.

Step3:
css

.box:before — -the white transparent border. When hovering,the border width turns 30px to 1px.

.box:after — — the white border besides the transparent border. When hovering,the borders hide.

The images zoom in to 1.2.When hovering, the images shrink to normal.