For other hover effects you can use the same HTML structure. You only need to change class pro_view_second to the following ones:pro_view_third - third effectpro_view_fourth - fourth effectpro_view_fifth - fifth effectpro_view_sixth - sixth effectpro_view_seventh - seventh effectpro_view_eight - eight effect

In ninth hover, we will use two pro_mask elements to slide them in from the bottom right and the top left:

CSS3 Images Style

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly.

To add such images to the page you need to copy the code and in the style.css file define background image and image dimensions.