CSS3 hover images animation effects
This is the demo of CSS3 animation effects when hovering the inages with Bootstraps and FontAwesome. Github here Step1: link bootstrap and fontawesome stylesheet Step2: Html According to Bootstrap grid layout,such as col-md-x, it's easy to bulid a responsive site. I got four images and description content here within the box. <i> icons are from fontawesome library. Step3: css When hovering the box,there is a black shadow outside of box. More syntax about box-shadow: /* offset-x | offset-y | color */ box-shadow : 60 px - 16 px teal ; /* offset-x | offset-y | blur-radius | color */ box-shadow : 10 px 5 px 5 px black ; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow : 2 px 2 px 2 px 1 px rgba ( 0 , 0 , 0 , 0.2 ) ; /* inset | offset-x | offset-y | color */ box-shadow : inset 5 em 1 em gold ; /* Any number of shadows, separated by commas */ box-shadow : 3 px 3 px red, - 1 em 0 0.4 em olive ; /* Global keywo...