Mocassin.css is a responsive collection of hover effects for Captions, powered by Sass. Each caption is adapt the size of the image.
The production code is inside of dist folder, you can install it via npm:
Wait please
Or via Bower:
Wait please
-
Include the stylesheet on your document's:
Non-responsive file:
<head> ... <link rel="stylesheet" href="css/mocassin.css"> <!-- Or *.min.css --> ... </head>
Responsive file (The caption does not hide in small screen):
<head> ... <link rel="stylesheet" href="css/mocassin-r.css"> <!-- Or *.min.css --> ... </head>
For touch event on touch screens, add:
<body> ... ... <script src="js/mocassin.js"></script> <!-- Or *.min.js --> </body>
-
Add class
mc-itemto the main,mc-item__imageto the<img ...>element, andmc-item__captionto the content caption. Example:<figure class="mc-item"> <img class="mc-item__image" src="..." alt="..."> <figcaption class="mc-item__caption"> <h3>This is my content!</h3> </figcaption> </figure>
-
Finally you need to add one of the following class:
- fadeIn Caption
mc-item--fadeIn
- Sliding Caption and Image
mc-item--slideInUpmc-item--slideInDownmc-item--slideInUpBigmc-item--slideInDownBig
- Sliding Caption and ZoomIn Image
mc-item--slideInUp-zoomInmc-item--slideInDown-zoomInmc-item--slideInUpBig-zoomInmc-item--slideInDownBig-zoomIn
- ZoomOut Image
mc-item--zoomOutmc-item--zoomOutUpmc-item--zoomOutDown
- Sliding Caption and ZoomOut Image
mc-item--slideInUpBig-zoomOutmc-item--slideInDownBig-zoomOutmc-item--slideInLeftBig-zoomOutmc-item--slideInRightBig-zoomOut
- Sliding Caption and Image to the 50% (Half)
mc-item--slideInLeftHalfmc-item--slideInRightHalf
- Flip Out Caption
mc-item--flipOutUpmc-item--flipOutDownmc-item--flipOutLeftmc-item--flipOutRight
Example:
<figure class="mc-item mc-item--zoomOut"> <img class="mc-item__image" src="..." alt="..."> <figcaption class="mc-item__caption"> <h3>This is my content!</h3> </figcaption> </figure>
- fadeIn Caption
Mocassin.css is powered by Gulp, and you can create custom builds. First you'll need Gulp and other dependencies:
$ cd path/to/mocassin.css/
$ sudo npm installNow, you can eliminate in mocassin.scss or mocassin-r.scss those effects that do not want, and then run with:
$ gulp createCSSI only have three rules for submitting a pull request:
-
Match the follow naming convention (
camelCase):mc-item--[captionEffect] || [imageEffect] || [captionEffect]-[imageEffect] || [sameEffect]mc-item--[captionEffect]: Effect that only happen to the Caption.mc-item--[imageEffect]: Effect that only happen to the Image.mc-item--[captionEffect]-[imageEffect]: Effect that happen to the Caption, and effect that happen to the Image.mc-item--[sameEffect]: The same effect for those two.
Example:
<figure class="mc-item mc-item--slideInUp-zoomIn"> <!-- Caption [SlideInUp] and Image [ZoomIn] --> </figure>
-
Let us see a demo of submitted effects in CodePen.
-
The PR must aim to
developbranch and not tomasterbranch. The branch of the feature must be started asfeature/[issue]-feature-name.
Mocassin.css is licensed under the MIT license.