//------------------------------------*/ // ADDON VARIABLES // Grayscale Effect Adjustments @grayscale-effect-start: 100%; @grayscale-effect-end: 0%; // Hover Animation Speed @grayscale-effect-animation-speed: .35s; .sqs-block-summary-v2 { .summary-item { .img-wrapper, .sqs-video-wrapper { img { -webkit-filter: grayscale(@grayscale-effect-start); filter: grayscale(@grayscale-effect-start); -webkit-transition: @grayscale-effect-animation-speed all linear; -moz-transition: @grayscale-effect-animation-speed all linear; -ms-transition: @grayscale-effect-animation-speed all linear; -o-transition: @grayscale-effect-animation-speed all linear; transition: @grayscale-effect-animation-speed all linear; } } &:hover { .img-wrapper, .sqs-video-wrapper { img { -webkit-filter: grayscale(@grayscale-effect-end); filter: grayscale(@grayscale-effect-end); } } } } } .sqs-block-gallery { .slide { img { -webkit-filter: grayscale(@grayscale-effect-start); filter: grayscale(@grayscale-effect-start); -webkit-transition: @grayscale-effect-animation-speed all linear; -moz-transition: @grayscale-effect-animation-speed all linear; -ms-transition: @grayscale-effect-animation-speed all linear; -o-transition: @grayscale-effect-animation-speed all linear; transition: @grayscale-effect-animation-speed all linear; } &:hover { img { -webkit-filter: grayscale(@grayscale-effect-end); filter: grayscale(@grayscale-effect-end); } } } }