design-themes/theme_avantgarde_blog/static/src/scss/primary_variables.scss

@mixin s-latest-posts-js-get-posts-hook {
    .s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) p {
        margin: 0;
    }

    &.effect-dexter .s_latest_posts_post {
        &::before {
            content: "";
            @include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
            background: linear-gradient(to bottom, darken(theme-color('beta'), 10%) 0%,darken(theme-color('beta'), 30%) 100%);
        }
        .thumb {
            transition: opacity 0.35s;
        }
        > div:not(.o_record_cover_container):not(.js-loading) {
            padding: 3em;
            text-align: left;
            &:after {
                @include o-position-absolute(auto, 2em, 2em, 2em);
                height: calc(50% - 2em);
                border: 2px solid #fff;
                content: "";
                transition: transform 0.35s;
                transform: translate3d(0, -100%, 0);
            }
        }
        p {
            @include o-position-absolute(auto, 60px, 60px, 60px);
            opacity: 0;
            transition: e(  "opacity 0.35s linear 0s, transform 0.35s linear 0s");
            -webkit-transform: translate3d(0,-100px,0);
            transform: translate3d(0,-100px,0);
        }
        &:hover {
            .thumb {
                opacity: 0.4!important;
            }
            > div:not(.o_record_cover_container):not(.js-loading)::after {
                transform: translate3d(0, 0, 0);
            }
            p {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }
    }
    &.effect-chico {
        .o_record_cover_image {
            transition: opacity 0.35s, transform 0.35s;
            transform: scale(1.12);
        }
        .s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
            padding: 3em;
            &::before {
                @include o-position-absolute(7%, 7%, 7%, 7%);
                border: 1px solid #fff;
                content: "";
                transform: scale(1.1);
                opacity: 0;
                transition: opacity 0.35s, transform 0.35s;
            }
        }
        p {
            opacity: 0;
            transition: opacity 0.35s, transform 0.35s;
            margin: 10% auto 0 !important;
            max-width: 200px;
            transform: scale(1.5);
        }
        h2 {
            padding: 0;
        }
        .s_latest_posts_post:hover {
            .o_record_cover_image {
                transform: scale(1);
            }
            > div:not(.o_record_cover_container):not(.js-loading)::before, p {
                opacity: 1;
                transform: scale(1);
            }
        }
    }
    &.effect-marley {
        .s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
            text-align: right;
            h2, p {
                @include o-position-absolute(auto, 30px, auto, 30px);
                padding: 10px 0;
            }
            p {
                bottom: 30px;
                line-height: 1.5;
                -webkit-transform: translate3d(0,100%,0);
                transform: translate3d(0,100%,0);
                opacity: 0;
                -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                transition: opacity 0.35s, transform 0.35s;
            }
            h2 {
                top: 30px;
                -webkit-transition: -webkit-transform 0.35s;
                transition: transform 0.35s;
                -webkit-transform: translate3d(0,20px,0);
                transform: translate3d(0,20px,0);
                &:after {
                    @include o-position-absolute(100%, auto, auto, 0);
                    width: 100%;
                    height: 4px;
                    background: #fff;
                    content: "";
                    -webkit-transform: translate3d(0,40px,0);
                    transform: translate3d(0,40px,0);
                    opacity: 0;
                    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
                    transition: opacity 0.35s, transform 0.35s;
                }
            }
        }
        .s_latest_posts_post:hover > div:not(.o_record_cover_container):not(.js-loading) {
            h2 {
                -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
            }
            h2::after, p {
                opacity: 1;
                -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
            }
        }
    }
    &.effect-steve .s_latest_posts_post {
        z-index: auto;
        &::before {
            content: "";
            @include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
            background: #000;
        }
        > div:not(.o_record_cover_container):not(.js-loading) {
            z-index: 1;
        }
        .thumb {
            opacity: 1;
            transition: transform 0.35s;
            transform: perspective(1000px) translate3d(0,0,0);
        }
        h2, p {
            background: #fff;
            color: #2d434e;
        }
        h2 {
            position: relative;
            margin-top: 0.1em;
            padding: 0.25em;
            &:before {
                box-shadow: 0 1px 10px rgba(0,0,0,0.5);
            }
        }
        p {
            margin-top: 1em !important;
            padding: 0.5em;
            font-weight: 800;
            opacity: 0;
            transition: opacity 0.35s, transform 0.35s;
            transform: scale3d(0.9,0.9,1);
        }
        &:hover {
            h2:before {
                opacity: 0;
            }
            .thumb {
                transform: perspective(1000px) translate3d(0,0,21px);
            }
            p {
                opacity: 1;
                transform: scale3d(1,1,1);
            }
        }
    }

    &.first_is_big .s_latest_posts_post:first-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
}