Image Styles inspired by the filters on Instagram
This works in the Haddock Template.
Credit: CSSgram
, an open source library (MIT) for recreating Instagram filters.
, an open source library (MIT) for recreating Instagram filters.
You can use these image styles in your pages like so:
%%add-css [CSSInstagramFilters] /%
[{Image src='...' class='brooklyn' }]
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Summary#
- light
- dark
- invert
- grayscale
- blur
- caption
- caption-arrow
- caption-overlay
- rounded
- circle
- raised
- fliph
- flipv
- fliphv
- kenburns
- blend, blend2
- sepia
- brightness
- saturate-2, saturate-8
- contrast-2, contrast-10
- hue-rotate-1, hue-rotate-2, hue-rotate-3
- aden
- brooklyn
- clarendon
- earlybird
- gingham
- hudson
- inkwell
- lark
- lofi
- mayfair
- moon
- nashville
- perpetua
- reyes
- rise
- slumber
- toaster
- walden
- willow
- xpro2
- Y1997
See also Category.Add CSS Style, Image Styles CSSInstagramFilters
/* simple image grid with hover effect to show original image*/
.poppy img {width:200px;}
.poppy table {float:left; margin-right:.5em;}
.poppy + * { clear:both; }
.poppy td:hover{
filter:none !important;
transform:none !important;
mix-blend-mode:normal !important;
}
.poppy td:hover:before,
.poppy td:hover:after { opacity:0; }
.poppy td {transition: 1s all;}
.feather {
background-image:url(
);
background-repeat:no-repeat;
background-position:top;
background-size:48px;
text-align:center;
}
);
background-repeat:no-repeat;
background-position:top;
background-size:48px;
text-align:center;
}
Copyright © 2025 The Apache Software Foundation,
Licensed under the Apache License, Version 2.0.
Apache and the Apache feather logo are trademarks of The Apache Software Foundation.
Licensed under the Apache License, Version 2.0
.Apache and the Apache feather logo are trademarks of The Apache Software Foundation.