// // Gallery Styles // // .gallery-wrapper { .gallery-box { .gallery-img { position: relative; overflow: hidden; a { display: block; &:before { content: ''; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; background: get-color("white", 0.1); width: 100%; height: 100%; @include transition(ease-out 0.12s); } img { @include transform(scale(1)); width: 100%; @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)); } &:hover { &:before { opacity: 1; } img { @include transform(scale(1.04)); } } .gallery-title { position: absolute; top: 50%; left: 50%; @include transform(translate(-50%,-50%)); z-index: 2; background: white; padding: 10px 20px; h1, h2, h3, h4, h5, h6 { display: inline-block; margin: 0; } } } } } // // Gallery Image Hover Styles // // &.hover-style-2 { .gallery-box { .gallery-img { a { &:before { background: get-color("dark", 0.1); } } } } } // // Gallery Image border-radius // // &[class*='border-radius'] { .gallery-box { .gallery-img { @include transform(translate3d(0,0,0)); overflow: hidden; } } } &.border-radius { .gallery-box .gallery-img { border-radius: 0.4em; } } &.border-radius-1 { .gallery-box .gallery-img { border-radius: 1.0em; } } }