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-top
is 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