blog/_src/_assets/styl/_kremalicious/content-photo.styl

//
// kremalicious3
// --------------
// Content - Photo Post
//

.hentry.format-photo
    @extend .textcenter

    .hentry__teaser
        picture
            margin-top: 0
            margin-bottom: 0

    figure
        @extend .aligncenter
        position: relative
        display: inline-block

        img,
        figcaption
            margin-bottom: 0

        figcaption
            @extend .transition
            transition-property: transform, opacity
            position: absolute
            min-width: 45%
            text-align: right
            font-family: $headings-font-family
            font-weight: $headings-font-weight
            font-style: normal
            font-size: $font-size-small
            padding: ($spacer/3)
            background: $link-color
            background: alpha($link-color, .7)
            color: #fff
            text-shadow: 0 1px 0 #000

            left: -8%
            top: $spacer

            @media $breakpoint2
                left: -16%

            opacity: 0
            transform: translate3d(0, -20px, 0)

        &:hover figcaption
            opacity: 1
            transform: translate3d(0, 0, 0)

    .entry-content
        text-align: left
        margin-top: $spacer

    .page-single &
        padding-top: 0
        padding-bottom: ($spacer*3)

        @media $breakpoint2
            padding-top: 0
            padding-bottom: ($spacer*6)

        figure img
            max-height: none

        figcaption
            opacity: 1
            transform: translate(0,0)
            background: #000
            background: rgba(#000, .4)


.photo-link
    display: block

    &:hover
        img
            border-color: $link-color

    &:active
        background: none


//
// Photo background change adjustment
//
.ab-dark
    .entry-content
         color: $text-color-dimmed

    .byline, time, .comments
        color: $text-color-light