blog/src/components/atoms/PostImage.module.scss

@import 'variables';
@import 'mixins';

.postImageTitle {
    transition: .1s ease-out;
    font-size: $font-size-h3;
    font-family: $font-family-headings;
    line-height: $line-height-headings;
    font-weight: $font-weight-headings;
    font-style: normal;
    text-align: left;
    letter-spacing: -.02em;
    margin: 0;
    position: absolute;
    top: 10%;
    padding: $spacer / 3 $spacer;
    background: rgba($link-color, .85);
    color: #fff;
    text-shadow: 0 1px 0 #000;
    left: 0;
    opacity: 0;
    transform: translate3d(0, -20px, 0);
}

.postImage {
    @include breakoutviewport();

    max-width: none;
    display: block;
    margin-top: $spacer * 1.5;
    margin-bottom: $spacer * 1.5;

    > div {
        @include media-frame();

        border-radius: 0;

        @media (min-width: $screen-sm) {
            border-radius: $border-radius;
        }
    }

    a & {
        position: relative;
        display: block;
    }

    a:hover & {
        > div {
            border-color: $link-color !important;
        }

        .postImageTitle {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    img {
        border-radius: 0;
    }
}