12 Cool CSS3 mouse slide over picture mask layer animation effects

Incontent is a very cool CSS3 mouse slide over the picture mask layer animation effect. This set of effects has 12 different mouse slide over the picture effect, divided into 3 categories of sliding, rotating and flipping. It works correctly in modern browsers that support CSS3 transition and transform properties.

Online preview Source Download

How to use

Using the CSS3 mouse to slide over the picture mask layer animation effect requires the introduction of a Sass-compiled.css file compiled by sass or a less-compiled.css file compiled by less in the page.

<rel= "stylesheet"  href= "Css/sass-compiled.css " type  = "text/css"/> or:<rel= "stylesheet"  href= "css/less-compiled.css"  type= "text/css"/>        

HTML Structure

The basic HTML structure of the CSS3 mouse over the picture mask layer animation effect is as follows:

<Divclass= "Pic">    <imgsrc= "Img/01.jpg"class= "Pic-image"alt= "Pic"/>    <spanclass= "Pic-caption bottom-to-top">        <H1class= "Pic-title">Pic Title</H1>        <P>Picture Description text</P>    </span></Div>        

.bottom-to-topis the animation effect class for the mask layer.

Available animation effects

The CSS3 mouse slide over the picture mask layer animation effect has the following 12 kinds of CSS3 animation effects available.

12 Cool CSS3 mouse slide over picture mask layer animation effects