@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%; } }