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

2 entries across 2 versions & 1 rubygems

Version	Path
rapido-css-0.1.3	stylesheets/components/_captions.scss
rapido-css-0.1.2	stylesheets/components/_captions.scss