Sha256: 7852cf009a3ec912dd37581b0c15415c5fa49657ef8abeac9500323a28c748e9
Contents?: true
Size: 1.92 KB
Versions: 6
Compression:
Stored size: 1.92 KB
Contents
/* ====================================================================================================================
Captions
Add captions to images. The position is defined by `data-position` and the content by `data-content`.
It's possible to add an animation using `data-animation` with either `fade` or `float`.
For positioning are available: `top`, `right`, `bottom`, `left`, `top-left`, `top-right`, `bottom-right`, `bottom-left`.
Markup:
<figure class="caption" data-position="bottom" data-animation="{$modifiers}" data-content="Caption text.">
<img src="http://dummyimage.com/300x200/afe600/fff" />
</figure>
fade - Add fade-in animation for the caption
float - Add fade-in and slide-in animation for the caption
Styleguide 5
==================================================================================================================== */
@if $captions {
.caption {
position: relative;
display: inline-block;
width: auto;
overflow: hidden;
line-height: 0;
&:after {
@extend %caption !optional;
display: inline-block;
content: attr(data-content);
position: absolute;
line-height: rhythm();
}
&[data-position*="top"]:after { top:0; }
&[data-position*="bottom"]:after { bottom:0; }
&[data-position*="left"]:after { left:0; }
&[data-position*="right"]:after { right:0; }
&[data-position$="top"]:after,
&[data-position$="bottom"]:after { left: 0; right: 0; }
// Animations
&[data-animation*="fade"],
&[data-animation*="float"] {
&:after {
@include transition();
@include opacity(0);
visibility: hidden;
}
&:hover:after {
@include opacity(1);
visibility: visible;
}
}
// Float animation
&[data-animation*="float"][data-position*="top"] {
&:after { top: -10px; }
&:hover:after { top: 0; }
}
&[data-animation*="float"][data-position*="bottom"] {
&:after { bottom: -10px; }
&:hover:after { bottom: 0; }
}
}
}
Version data entries
6 entries across 6 versions & 1 rubygems