datamad2017/_sass/partials/_lily-effect.scss

.lily-effect {
    margin-bottom: 26px;
    cursor: pointer;
    transition: $base-transition;
    box-shadow: 0 1px 7px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .15);
    &:hover {
        box-shadow: 0 1px 7px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .35);
        figure {
            background-position: center left;
            -webkit-background-size: 105%;
            background-size: 105%;
        }
        figcaption {
            @media (min-width: 768px) and (max-width: 991px) {
                bottom: .5em;
                padding-left: 1em;
            }
            h2, .position {
                transform: translateY(-30px);
            }
            .position {
                line-height: 1;
                margin-top: 8px;
                transition-delay: .05s;
                transition-duration: .35s;
            }
            h2, p {
                @media (max-width: 767px) {
                    transform: translateY(-25px);
                }
            }
        } 
        .overlay {
            background: rgba(0, 0, 0, .3);
            @media (max-width: 767px) {
                background: rgba(0, 0, 0, 0);  
            }
        }
    }
    figure {
        overflow: hidden;
        width: 100%;
        height: 100%;
        transition: $base-transition;
        background-position: -30px;
        -webkit-background-size: 115%;
        background-size: 115%;
        @media (max-width: 767px) {
            background-position: center left;
            -webkit-background-size: 105%;        
            background-size: 105%;        
        }
    }
    figcaption {
        font-size: 16px;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50%;
        padding: 32px 16px;
        text-transform: uppercase;
        color: #fff;
        h2, p {
            @media (max-width: 767px) {
                transform: translateY(-25px);
            }
        }
        h2 {
            font-size: 20px;
            line-height: 1;
            font-weight: $regular;
            transition: $base-transition;
            transform: translateY(-10px);
            word-spacing: -2px;
            span {
                font-weight: $extra-bold;
                display: block;
            }
        }
        p {
            @media (max-width: 767px) {
                line-height: 1;
                opacity: 1;
            }    
        }
        .position {
            margin: 0;
            font-size: 11px;
            transition: $base-transition;
            letter-spacing: 1px;
            color: rgba(255, 255, 255, .9);
            transform: translateY(20px);
            @media (max-width: 767px) {
                transform: translateY(-30px);
            }
        }
    }
    .overlay {
        transition: $base-transition;
        background: rgba(0, 0, 0, 0);
    }
    .lily-head {
        height: 200px;
    }
    .lily-bottom {
        clear: both;
        height: 80px;
        padding: 16px 14px 9px;
        transition: $base-transition;
        border-bottom: 2px solid #fff;
        background: #fff;
        h2 {
            font-size: 21px;
            font-weight: $regular;
            margin: 0;
        }
        .title {
            font-size: 16px;
            line-height: 1.5;
            display: block;
            display: -webkit-box;
            overflow: hidden;
            height: 50px;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .slider-next-item {
            position: absolute;
            right: 15px;
            bottom: 10px;
        }
    }
}