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;}
);
background-repeat:no-repeat;
background-position:top;
background-size:48px;
text-align:center;
}