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)
 |
| css links |
Step2:
html
 |
| html |
.box-content is the mask layer content. and inner is the descriptions of pictures.
 |
| box-content |
icon is from font-awesome with "fa" class.
Step3:
css
 |
| css |
.box:before---the white transparent border. When hovering,the border width turns 30px to 1px.
 |
| css |
.box:after--- the white border besides the transparent border. When hovering,the borders hide.
 |
| css |
The images zoom in to 1.2.When hovering, the images shrink to normal.
 |
| css |
.box-content---inside the two borders.When hovering, the position changes 6px with transitions.
 |
| css |
.box-inner-content---the description part hides at first, and show up when the box hovering.
 |
| css |
 |
| css |
Make the stylish for the detail tag for inside for box-inner-content.
For responsive pages,more added styles below:
When the screen width smaller than 990px, the box width and margin-bottom changes.
