Image Features Source

Link to article: Image Features Source.

@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");
#page-title, h1 {
    text-align: center;
}

h1 {
    color: rgb(var(--swatch-primary));
}

.scp-image-block br {
    display: none;
}
.scp-image-caption br {
    display: initial;
}
.scp-image-block[data-feature="image-feature"],
.scp-image-block[data-feature="image-feature"] img.image,
.scp-image-block[data-feature="image-feature"] iframe {
    width: 100%;
    min-width: initial !important;
}
.scp-image-caption.hidden {
    display: none;
}
.scp-image-caption.show {
    display: block;
    width: 100%;
}
@media only screen and (max-width: 768px) {
    .scp-image-block[data-feature="image-feature"]:not(.nofloat) {
    	max-width: 40vw;
    }
}

.image-blur-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-blur-reveal-image,
.image-blur-reveal-image img {
    overflow: hidden;
}
.image-blur-reveal-image img {
    --blur-amount: calc({$blur-amount}rem);
    background-color: rgb(var(--swatch-background,255,255,255));
    -webkit-filter: blur(var(--blur-amount));
    		filter: blur(var(--blur-amount));
    -webkit-transform: scale({$blur-amount});
       -moz-transform: scale({$blur-amount});
     -ms-transform: scale({$blur-amount});
     -o-transform: scale({$blur-amount});
     transform: scale({$blur-amount});
    -webkit-transition: 
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: 
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-o-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: 
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),			 
    	-moz-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    		 transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:				
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),			
    -webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
       -moz-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	 -o-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    		transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),;
}
.image-blur-reveal-image:hover img,
.image-blur-reveal-image:active img {
    -webkit-filter: blur(0);
    		filter: blur(0);
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
    	-ms-transform: scale(1);
    	 -o-transform: scale(1);
    		transform: scale(1);
}
.image-blur-reveal-image:focus-within img {
    -webkit-filter: blur(0);
    		filter: blur(0);
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
    	-ms-transform: scale(1);
    	 -o-transform: scale(1);
    		transform: scale(1);
}

div.image-blur-slide-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
div.image-blur-slide-reveal-image,
div.image-blur-slide-reveal-image img {
    overflow: hidden;
}

div.image-blur-slide-reveal-image {
    position: relative;
}

div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top {
    background-color: rgba(var(--swatch-menubg-light-color, 255, 255, 255), .9);
    position: absolute;
    width: 100%;
    height: 100%;
}

@supports not ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top {
        --top: 100% 0 0 0;
        --right: 0 100% 0 0;
        --bottom: 0 0 100% 0;
        --left: 0 0 0 100%
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top img {
        --blur-amount: calc({$blur-amount}rem * .2);
        -webkit-filter: blur(var(--blur-amount));
        filter: blur(var(--blur-amount));        
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top {
    background-color: rgba(0, 0, 0, 0.9);
        -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
        -webkit-transition: -webkit-clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: -webkit-clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition: clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition: clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    div.image-blur-slide-reveal-image:hover div.image-blur-slide-reveal-top.blur-slide-{$slide-direction} {
        -webkit-clip-path: inset(var(--{$slide-direction}));
                clip-path: inset(var(--{$slide-direction}));
    }
}


@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top {
        --blur-amount: calc({$blur-amount}rem * .2);
        background-color: rgba(0, 0, 0, .1);
        -webkit-backdrop-filter:blur(var(--blur-amount));
        backdrop-filter:blur(var(--blur-amount));
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top img {
        display: none;
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-{$slide-direction} {
        padding: 0;
        {$slide-direction}: 0;
        -webkit-transition: {$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition: {$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition: {$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: {$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    div.image-blur-slide-reveal-image:hover div.image-blur-slide-reveal-top.blur-slide-{$slide-direction} {
        {$slide-direction}: -webkit-calc(100% + 0.125rem);
        {$slide-direction}: -moz-calc(100% + 0.125rem);
        {$slide-direction}: calc(100% + 0.125rem);
    }

    div.image-blur-slide-reveal-image:focus-within div.image-blur-slide-reveal-top.blur-slide-{$slide-direction} {
        {$slide-direction}: -webkit-calc(100% + 0.125rem) !important;
        {$slide-direction}: -moz-calc(100% + 0.125rem) !important;
        {$slide-direction}: calc(100% + 0.125rem) !important;
    }
}

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-left {
        -webkit-box-shadow: -0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        -moz-box-shadow: -0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        box-shadow: -0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
    }

     div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-right {
        -webkit-box-shadow: 0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        -moz-box-shadow: 0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        box-shadow: 0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-top {
        -webkit-box-shadow: 0 -0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        -moz-box-shadow: 0 -0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        box-shadow: 0 -0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-bottom {
        -webkit-box-shadow: 0 0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        -moz-box-shadow: 0 0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        box-shadow: 0 0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
    }

.image-block-slide-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-block-slide-reveal-image,
.image-block-slide-reveal-image img {
    overflow: hidden;
}

.image-block-slide-reveal-image  {
    position: relative;
}

.image-block-slide-reveal-image .image-block-slide-reveal-top {
    background-color: {$block-color};
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.image-block-slide-reveal-image .image-block-slide-reveal-top {    
    -webkit-box-shadow: -0.125rem 0 0 0 rgb(var(--swatch-border-color, 102, 102, 102));    
       -moz-box-shadow: -0.125rem 0 0 0 rgb(var(--swatch-border-color, 102, 102, 102));    
    		box-shadow: -0.125rem 0 0 0 rgb(var(--swatch-border-color, 102, 102, 102));
    margin-{$slide-direction}: 0;
    -webkit-transition: margin-{$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: margin-{$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: margin-{$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: margin-{$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.image-block-slide-reveal-image:hover .image-block-slide-reveal-top {
    margin-{$slide-direction}: -webkit-calc(100% + 0.125rem);
    margin-{$slide-direction}: -moz-calc(100% + 0.125rem);
    margin-{$slide-direction}: calc(100% + 0.125rem);
}
.image-block-slide-reveal-image:focus-within .image-block-slide-reveal-top {
    margin-{$slide-direction}: -webkit-calc(100% + 0.125rem);
    margin-{$slide-direction}: -moz-calc(100% + 0.125rem);
    margin-{$slide-direction}: calc(100% + 0.125rem);
}

.image-hover-enlarge {
    position: relative;
}

.image-hover-enlarge.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}

.image-hover-enlarge img.image {
    -webkit-box-shadow: 0 0 0 0.0625rem rgb(var(--swatch-border-color, 102, 102, 102));
       -moz-box-shadow: 0 0 0 0.0625rem rgb(var(--swatch-border-color, 102, 102, 102));
     box-shadow: 0 0 0 0.0625rem rgb(var(--swatch-border-color, 102, 102, 102));
    -webkit-transition:
     -webkit-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
     -webkit-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition:
     box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition:
     box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
     box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
     -webkit-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -moz-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -moz-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.image-hover-enlarge img.image:hover {
    --enlarge-by: {$enlarge-amount};
    --enlarge-by-final: -webkit-calc(1 + (var(--enlarge-by)/10));
    --enlarge-by-final: -moz-calc(1 + (var(--enlarge-by)/10));
    --enlarge-by-final: calc(1 + (var(--enlarge-by)/10));
    -webkit-box-shadow: 0 0 0 -webkit-calc(0.0625rem / var(--enlarge-by-final)) rgb(var(--swatch-border-color, 102, 102, 102));
       -moz-box-shadow: 0 0 0 -moz-calc(0.0625rem / var(--enlarge-by-final)) rgb(var(--swatch-border-color, 102, 102, 102));
     box-shadow: 0 0 0 calc(0.0625rem / var(--enlarge-by-final)) rgb(var(--swatch-border-color, 102, 102, 102));
    -webkit-transform: scale3d(var(--enlarge-by-final), var(--enlarge-by-final), 1);
       -moz-transform: scale3d(var(--enlarge-by-final), var(--enlarge-by-final), 1);
     transform: scale3d(var(--enlarge-by-final), var(--enlarge-by-final), 1);
}


.image-click-fullscreen {
    position: relative;	
}

.image-click-fullscreen.nofloat {
    width: 18.75rem !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}

.image-click-fullscreen-base {
    cursor: pointer;
}

.image-click-fullscreen-image {
    display: none;
    pointer-events: none;
}

.image-click-fullscreen-image img.image {
    width: auto !important;
    height: auto;
    max-width: 95vw;
    max-height: -webkit-calc(100vh - 2rem);
    max-height: -moz-calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
    -o-object-fit: scale-down;
       object-fit: scale-down;
    position: relative;
    z-index: 999;
    pointer-events: none;
}

.image-click-fullscreen-image::before,
.image-click-fullscreen-image::after {
    content: "";
    position: fixed;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

.image-click-fullscreen-image::before {
    z-index: 997;
    background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),0);
}

.image-click-fullscreen-image::after {
    z-index: 1000;
    background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),1);
    visibility: hidden;
    -webkit-transition: 
    	background-color 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: 
    	background-color 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: 
    	background-color 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	background-color 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.image-click-fullscreen-base:active + .image-click-fullscreen-image::before {
    background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),1);
}

.image-click-fullscreen-base:active + .image-click-fullscreen-image::after {
    visibility: visible;
    background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),0);
}

.image-click-fullscreen-base:active + .image-click-fullscreen-image {
    z-index: 998;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
    	-ms-flex-align: center;
    		align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
    	-ms-flex-pack: center;
    		justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 100%;	
}

.image-click-fullscreen-base:active ~ .scp-image-caption {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	max-width: 100vw !important;
    	z-index: 999;
    	font-size: 1rem;
}

.mobile-exit {
    display: none;
}
@media only screen and (max-width: 768px) {
    .image-click-fullscreen-base:active + .image-click-fullscreen-image::before,
    .image-click-fullscreen-base:hover + .image-click-fullscreen-image::before {
    	background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),1);
    }

    .image-click-fullscreen-base:active + .image-click-fullscreen-image::after,
    .image-click-fullscreen-base:hover + .image-click-fullscreen-image::after {
    	visibility: visible;
    	background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),0);
    }

    .image-click-fullscreen-base:active + .image-click-fullscreen-image,
    .image-click-fullscreen-base:hover + .image-click-fullscreen-image {
    	z-index: 998;
    	display: -webkit-box;
    	display: -webkit-flex;
    	display: -moz-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-align: center;
    	-webkit-align-items: center;
    	   -moz-box-align: center;
    		-ms-flex-align: center;
    			align-items: center;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	   -moz-box-pack: center;
    		-ms-flex-pack: center;
    			justify-content: center;
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;	
    }

    .image-click-fullscreen-base:active ~ .mobile-exit,
    .image-click-fullscreen-base:hover ~ .mobile-exit {
    	--wght: 900;
    	position: fixed;
    	display: -webkit-box;
    	display: -webkit-flex;
    	display: -moz-box;
    	display: -ms-flexbox;
    	display: flex;
    	align-item: center;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	   -moz-box-pack: center;
    		-ms-flex-pack: center;
    			justify-content: center;
    	width: 1.5em;
    	height: 1.5em;
    	top: -webkit-calc(1rem + var(--topbar-height-on-mobile, 0rem));
    	top: -moz-calc(1rem + var(--topbar-height-on-mobile, 0rem));
    	top: calc(1rem + var(--topbar-height-on-mobile, 0rem));
    	right: 1rem;
    	-webkit-border-radius: 50%;
    	   -moz-border-radius: 50%;
    			border-radius: 50%;
    	font-size: 2rem;
    	font-weight: 900;
    	background-color: rgba(var(--white-monochrome, 255, 255, 255));
    	color: rgb(var(--swatch-primary, 51, 51, 51));
    	cursor: pointer;
    	z-index: 9999;
    	line-height: 1em;
    	opacity: 0.5;
    	text-align: center;
    	line-height: 1.3em;
    }

    .image-click-fullscreen-base:active ~ .scp-image-caption,
    .image-click-fullscreen-base:hover ~ .scp-image-caption {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	max-width: 100vw !important;
    	z-index: 1000;
    	font-size: 1rem;
    }
}

.image-hover-noise-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-hover-noise-reveal-image {
    background: {$background};
    position: relative;
}
.image-hover-noise-reveal-image img.image {
    opacity: 0;
    pointer-events: none;
}
.image-hover-noise-reveal-image iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.image-pixelate-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-pixelate-reveal-image {
    position: relative;
    overflow: hidden;
}
.image-pixelate-reveal-image img.image {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.image-pixelate-reveal-image iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.image-change.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}

.image-change-image {
    position: relative;
}

.image-change-image,
.image-change-image img.image {
    overflow: hidden;
    -o-object-fit: fill;
    object-fit: fill;
}

.image-change-image .top-image {
    position: relative;
    z-index: 1;
    opacity: 1;
    -webkit-filter: blur(0);
    		filter: blur(0);
    -webkit-transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),			   
    	webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    		   filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.image-change-image:hover .top-image {
    opacity: 0;
    -webkit-filter: {$blur-amount}px;
    		filter: {$blur-amount}px;
}

.image-change-image .bottom-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image-slide-revealer.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-slide-revealer-image {
    position: relative;
}
.image-slide-revealer-image img.image {
    opacity: 0;
    pointer-events: none;
}
.image-slide-revealer-image iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width: {$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```
```
max-width:{$width};
```

(none)

```
image-blur-reveal-image
```
```
image-blur-slide-reveal-image
```
```
image-blur-slide-reveal-top
```
```
blur-slide-{$slide-direction}
```
```
image-blur-slide-reveal-bottom
```
```
image-block-slide-reveal-image
```
```
image-block-slide-reveal-top
```
```
image-block-slide-reveal-bottom
```
```
image-click-fullscreen-base
```
```
image-click-fullscreen-image
```
```
mobile-exit
```
```
image-hover-noise-reveal-image
```
```
image
```
```
svg-container
```
```
image-pixelate-reveal-image
```
```
image
```
```
image-change-image
```
```
top-image
```
```
bottom-image
```
```
image-slide-revealer-image
```
```
revealer
```
```
img
```
```
img
```
```
slider
```

[[iftags +component-backend]]
[[module css]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");
#page-title, h1 {
    text-align: center;
}

h1 {
    color: rgb(var(--swatch-primary));
}
[[/module]]
[[=]]
+ Check Page Source for Code

++ [[[component:image-features|Main Component Link Here]]]
[[/=]]
[[/iftags]] 
[[module css]]
.scp-image-block br {
    display: none;
}
.scp-image-caption br {
    display: initial;
}
.scp-image-block[data-feature="image-feature"],
.scp-image-block[data-feature="image-feature"] img.image,
.scp-image-block[data-feature="image-feature"] iframe {
    width: 100%;
    min-width: initial !important;
}
.scp-image-caption.hidden {
    display: none;
}
.scp-image-caption.show {
    display: block;
    width: 100%;
}
@media only screen and (max-width: 768px) {
    .scp-image-block[data-feature="image-feature"]:not(.nofloat) {
    	max-width: 40vw;
    }
}
[[/module]]
[!-- {$blur-reveal}
[[module css]]
.image-blur-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-blur-reveal-image,
.image-blur-reveal-image img {
    overflow: hidden;
}
.image-blur-reveal-image img {
    --blur-amount: calc({$blur-amount}rem);
    background-color: rgb(var(--swatch-background,255,255,255));
    -webkit-filter: blur(var(--blur-amount));
    		filter: blur(var(--blur-amount));
    -webkit-transform: scale({$blur-amount});
       -moz-transform: scale({$blur-amount});
     -ms-transform: scale({$blur-amount});
     -o-transform: scale({$blur-amount});
     transform: scale({$blur-amount});
    -webkit-transition: 
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: 
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-o-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: 
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),			 
    	-moz-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    		 transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:				
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    			filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),			
    -webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
       -moz-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	 -o-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    		transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),;
}
.image-blur-reveal-image:hover img,
.image-blur-reveal-image:active img {
    -webkit-filter: blur(0);
    		filter: blur(0);
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
    	-ms-transform: scale(1);
    	 -o-transform: scale(1);
    		transform: scale(1);
}
.image-blur-reveal-image:focus-within img {
    -webkit-filter: blur(0);
    		filter: blur(0);
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
    	-ms-transform: scale(1);
    	 -o-transform: scale(1);
    		transform: scale(1);
}
[[/module]]
[[div_ class="image-blur-reveal scp-image-block [[#if {$float} | block-{$align} | nofloat ]]" data-feature="image-feature" style="max-width:{$width};"]]
    [[div_ class="image-blur-reveal-image" style="max-width:{$width};"]]
    [[image {$url} {$alt}="{$alt-text}"]]
    [[/div]]
    [[div_ class="scp-image-caption [[#if {$add-caption} | show | hidden ]]"]]
    	{$caption}
    [[/div]]
[[/div]]
[!----]
[!-- {$slide-blur-reveal}
[[module css]]
div.image-blur-slide-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
div.image-blur-slide-reveal-image,
div.image-blur-slide-reveal-image img {
    overflow: hidden;
}

div.image-blur-slide-reveal-image {
    position: relative;
}

div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top {
    background-color: rgba(var(--swatch-menubg-light-color, 255, 255, 255), .9);
    position: absolute;
    width: 100%;
    height: 100%;
}

@supports not ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top {
        --top: 100% 0 0 0;
        --right: 0 100% 0 0;
        --bottom: 0 0 100% 0;
        --left: 0 0 0 100%
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top img {
        --blur-amount: calc({$blur-amount}rem * .2);
        -webkit-filter: blur(var(--blur-amount));
        filter: blur(var(--blur-amount));        
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top {
    background-color: rgba(0, 0, 0, 0.9);
        -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
        -webkit-transition: -webkit-clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: -webkit-clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition: clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition: clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-clip-path {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    div.image-blur-slide-reveal-image:hover div.image-blur-slide-reveal-top.blur-slide-{$slide-direction} {
        -webkit-clip-path: inset(var(--{$slide-direction}));
                clip-path: inset(var(--{$slide-direction}));
    }
}


@supports ((-webkit-backdrop-filter: blur(1rem)) or (backdrop-filter: blur(1rem))) {
    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top {
        --blur-amount: calc({$blur-amount}rem * .2);
        background-color: rgba(0, 0, 0, .1);
        -webkit-backdrop-filter:blur(var(--blur-amount));
        backdrop-filter:blur(var(--blur-amount));
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top img {
        display: none;
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-{$slide-direction} {
        padding: 0;
        {$slide-direction}: 0;
        -webkit-transition: {$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -o-transition: {$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        -moz-transition: {$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: {$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    div.image-blur-slide-reveal-image:hover div.image-blur-slide-reveal-top.blur-slide-{$slide-direction} {
        {$slide-direction}: -webkit-calc(100% + 0.125rem);
        {$slide-direction}: -moz-calc(100% + 0.125rem);
        {$slide-direction}: calc(100% + 0.125rem);
    }

    div.image-blur-slide-reveal-image:focus-within div.image-blur-slide-reveal-top.blur-slide-{$slide-direction} {
        {$slide-direction}: -webkit-calc(100% + 0.125rem) !important;
        {$slide-direction}: -moz-calc(100% + 0.125rem) !important;
        {$slide-direction}: calc(100% + 0.125rem) !important;
    }
}

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-left {
        -webkit-box-shadow: -0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        -moz-box-shadow: -0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        box-shadow: -0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
    }

     div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-right {
        -webkit-box-shadow: 0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        -moz-box-shadow: 0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        box-shadow: 0.125rem 0 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-top {
        -webkit-box-shadow: 0 -0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        -moz-box-shadow: 0 -0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        box-shadow: 0 -0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
    }

    div.image-blur-slide-reveal-image div.image-blur-slide-reveal-top.blur-slide-bottom {
        -webkit-box-shadow: 0 0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        -moz-box-shadow: 0 0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
        box-shadow: 0 0.125rem 0 0 rgba(var(--swatch-primary-darkest,102, 102, 102));
    }
[[/module]]
[[div_ class="image-blur-slide-reveal scp-image-block [[#if {$float} | block-{$align} | nofloat ]]" data-feature="image-feature" style="max-width:{$width};"]]
    [[div_ class="image-blur-slide-reveal-image" style="max-width:{$width};"]]
    [[div_ class="image-blur-slide-reveal-top blur-slide-{$slide-direction}"]]
     [[image {$url} {$alt}="{$alt-text}"]]
    [[/div]]
    [[div_ class="image-blur-slide-reveal-bottom"]]
     [[image {$url} {$alt}="{$alt-text}"]]
    [[/div]]
    [[/div]]
    [[div_ class="scp-image-caption [[#if {$add-caption} | show | hidden ]]"]]
     {$caption}
    [[/div]]
[[/div]]
[!----]
[!-- {$slide-block-reveal}
[[module css]]
.image-block-slide-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-block-slide-reveal-image,
.image-block-slide-reveal-image img {
    overflow: hidden;
}

.image-block-slide-reveal-image  {
    position: relative;
}

.image-block-slide-reveal-image .image-block-slide-reveal-top {
    background-color: {$block-color};
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.image-block-slide-reveal-image .image-block-slide-reveal-top {    
    -webkit-box-shadow: -0.125rem 0 0 0 rgb(var(--swatch-border-color, 102, 102, 102));    
       -moz-box-shadow: -0.125rem 0 0 0 rgb(var(--swatch-border-color, 102, 102, 102));    
    		box-shadow: -0.125rem 0 0 0 rgb(var(--swatch-border-color, 102, 102, 102));
    margin-{$slide-direction}: 0;
    -webkit-transition: margin-{$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: margin-{$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: margin-{$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: margin-{$slide-direction} {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.image-block-slide-reveal-image:hover .image-block-slide-reveal-top {
    margin-{$slide-direction}: -webkit-calc(100% + 0.125rem);
    margin-{$slide-direction}: -moz-calc(100% + 0.125rem);
    margin-{$slide-direction}: calc(100% + 0.125rem);
}
.image-block-slide-reveal-image:focus-within .image-block-slide-reveal-top {
    margin-{$slide-direction}: -webkit-calc(100% + 0.125rem);
    margin-{$slide-direction}: -moz-calc(100% + 0.125rem);
    margin-{$slide-direction}: calc(100% + 0.125rem);
}

[[/module]]
[[div_ class="image-block-slide-reveal scp-image-block [[#if {$float} | block-{$align} | nofloat ]]" data-feature="image-feature" style="max-width:{$width};"]]
    [[div_ class="image-block-slide-reveal-image" style="max-width:{$width};"]]	
    	[[div_ class="image-block-slide-reveal-top"]]		
    	[[/div]]
    	[[div_ class="image-block-slide-reveal-bottom"]]
    		[[image {$url} {$alt}="{$alt-text}"]]
    	[[/div]]
    [[/div]]
    [[div_ class="scp-image-caption [[#if {$add-caption} | show | hidden ]]"]]
    	{$caption}
    [[/div]]
[[/div]]
[!----]
[!-- {$hover-enlarge}
[[module css]]
.image-hover-enlarge {
    position: relative;
}

.image-hover-enlarge.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}

.image-hover-enlarge img.image {
    -webkit-box-shadow: 0 0 0 0.0625rem rgb(var(--swatch-border-color, 102, 102, 102));
       -moz-box-shadow: 0 0 0 0.0625rem rgb(var(--swatch-border-color, 102, 102, 102));
     box-shadow: 0 0 0 0.0625rem rgb(var(--swatch-border-color, 102, 102, 102));
    -webkit-transition:
     -webkit-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
     -webkit-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition:
     box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition:
     box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
     box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
     -webkit-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -moz-box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     box-shadow {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -moz-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
     transform {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.image-hover-enlarge img.image:hover {
    --enlarge-by: {$enlarge-amount};
    --enlarge-by-final: -webkit-calc(1 + (var(--enlarge-by)/10));
    --enlarge-by-final: -moz-calc(1 + (var(--enlarge-by)/10));
    --enlarge-by-final: calc(1 + (var(--enlarge-by)/10));
    -webkit-box-shadow: 0 0 0 -webkit-calc(0.0625rem / var(--enlarge-by-final)) rgb(var(--swatch-border-color, 102, 102, 102));
       -moz-box-shadow: 0 0 0 -moz-calc(0.0625rem / var(--enlarge-by-final)) rgb(var(--swatch-border-color, 102, 102, 102));
     box-shadow: 0 0 0 calc(0.0625rem / var(--enlarge-by-final)) rgb(var(--swatch-border-color, 102, 102, 102));
    -webkit-transform: scale3d(var(--enlarge-by-final), var(--enlarge-by-final), 1);
       -moz-transform: scale3d(var(--enlarge-by-final), var(--enlarge-by-final), 1);
     transform: scale3d(var(--enlarge-by-final), var(--enlarge-by-final), 1);
}
[[/module]]
[[div_ class="image-hover-enlarge scp-image-block [[#if {$float} | block-{$align} | nofloat ]]" data-feature="image-feature" style="max-width:{$width};"]]
    [[image {$url} {$alt}="{$alt-text}"]]
    [[div_ class="scp-image-caption [[#if {$add-caption} | show | hidden ]]"]]
     {$caption}
    [[/div]]
[[/div]]
[!----]
[!-- {$click-fullscreen}
[[module css]]

.image-click-fullscreen {
    position: relative;	
}

.image-click-fullscreen.nofloat {
    width: 18.75rem !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}

.image-click-fullscreen-base {
    cursor: pointer;
}

.image-click-fullscreen-image {
    display: none;
    pointer-events: none;
}

.image-click-fullscreen-image img.image {
    width: auto !important;
    height: auto;
    max-width: 95vw;
    max-height: -webkit-calc(100vh - 2rem);
    max-height: -moz-calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
    -o-object-fit: scale-down;
       object-fit: scale-down;
    position: relative;
    z-index: 999;
    pointer-events: none;
}

.image-click-fullscreen-image::before,
.image-click-fullscreen-image::after {
    content: "";
    position: fixed;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

.image-click-fullscreen-image::before {
    z-index: 997;
    background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),0);
}

.image-click-fullscreen-image::after {
    z-index: 1000;
    background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),1);
    visibility: hidden;
    -webkit-transition: 
    	background-color 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: 
    	background-color 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: 
    	background-color 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	background-color 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.image-click-fullscreen-base:active + .image-click-fullscreen-image::before {
    background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),1);
}

.image-click-fullscreen-base:active + .image-click-fullscreen-image::after {
    visibility: visible;
    background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),0);
}

.image-click-fullscreen-base:active + .image-click-fullscreen-image {
    z-index: 998;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
    	-ms-flex-align: center;
    		align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
    	-ms-flex-pack: center;
    		justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 100%;	
}

.image-click-fullscreen-base:active ~ .scp-image-caption {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	max-width: 100vw !important;
    	z-index: 999;
    	font-size: 1rem;
}

.mobile-exit {
    display: none;
}
@media only screen and (max-width: 768px) {
    .image-click-fullscreen-base:active + .image-click-fullscreen-image::before,
    .image-click-fullscreen-base:hover + .image-click-fullscreen-image::before {
    	background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),1);
    }

    .image-click-fullscreen-base:active + .image-click-fullscreen-image::after,
    .image-click-fullscreen-base:hover + .image-click-fullscreen-image::after {
    	visibility: visible;
    	background-color: rgb(var(--swatch-menubg-dark-color, 0, 0, 0),0);
    }

    .image-click-fullscreen-base:active + .image-click-fullscreen-image,
    .image-click-fullscreen-base:hover + .image-click-fullscreen-image {
    	z-index: 998;
    	display: -webkit-box;
    	display: -webkit-flex;
    	display: -moz-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-align: center;
    	-webkit-align-items: center;
    	   -moz-box-align: center;
    		-ms-flex-align: center;
    			align-items: center;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	   -moz-box-pack: center;
    		-ms-flex-pack: center;
    			justify-content: center;
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;	
    }

    .image-click-fullscreen-base:active ~ .mobile-exit,
    .image-click-fullscreen-base:hover ~ .mobile-exit {
    	--wght: 900;
    	position: fixed;
    	display: -webkit-box;
    	display: -webkit-flex;
    	display: -moz-box;
    	display: -ms-flexbox;
    	display: flex;
    	align-item: center;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	   -moz-box-pack: center;
    		-ms-flex-pack: center;
    			justify-content: center;
    	width: 1.5em;
    	height: 1.5em;
    	top: -webkit-calc(1rem + var(--topbar-height-on-mobile, 0rem));
    	top: -moz-calc(1rem + var(--topbar-height-on-mobile, 0rem));
    	top: calc(1rem + var(--topbar-height-on-mobile, 0rem));
    	right: 1rem;
    	-webkit-border-radius: 50%;
    	   -moz-border-radius: 50%;
    			border-radius: 50%;
    	font-size: 2rem;
    	font-weight: 900;
    	background-color: rgba(var(--white-monochrome, 255, 255, 255));
    	color: rgb(var(--swatch-primary, 51, 51, 51));
    	cursor: pointer;
    	z-index: 9999;
    	line-height: 1em;
    	opacity: 0.5;
    	text-align: center;
    	line-height: 1.3em;
    }

    .image-click-fullscreen-base:active ~ .scp-image-caption,
    .image-click-fullscreen-base:hover ~ .scp-image-caption {
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	max-width: 100vw !important;
    	z-index: 1000;
    	font-size: 1rem;
    }
}

[[/module]]
[[div_ class="image-click-fullscreen scp-image-block [[#if {$float} | block-{$align} | nofloat ]]" data-feature="image-feature" style="max-width:{$width};"]]
    [[div_ class="image-click-fullscreen-base"]]	
    	[[image {$url} {$alt}="{$alt-text}"]]
    [[/div]]
    [[div_ class="image-click-fullscreen-image"]]	
    	[[image {$url} {$alt}="{$alt-text}"]]
    [[/div]]
    [[div_ class="scp-image-caption [[#if {$add-caption} | show | hidden ]]"]]
    	{$caption}
    [[/div]]
    [[div_ class="mobile-exit"]]
    	✖
    [[/div]]
[[/div]]
[!----]
[!-- {$noise-reveal}
[[module css]]
.image-hover-noise-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-hover-noise-reveal-image {
    background: {$background};
    position: relative;
}
.image-hover-noise-reveal-image img.image {
    opacity: 0;
    pointer-events: none;
}
.image-hover-noise-reveal-image iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
[[/module]]
[[div_ class="image-hover-noise-reveal scp-image-block [[#if {$float} | block-{$align} | nofloat ]]" data-feature="image-feature" style="max-width:{$width};"]]
[[div_ class="image-hover-noise-reveal-image" style="max-width:{$width};"]]	
[[image {$url} {$alt}="{$alt-text}"]]
[[html class="image"]]
<head>
    <style>		
    .svg-container {
    	position: relative;
    }
    .svg-container svg {
    	position: absolute;
    	width: 100% !important;		
    	top: 0;
    	left: 0;
    	-o-object-fit: contain;
    	   object-fit: contain;
    }
    .svg-container img {		
    	pointer-events: none;
    	height: 100%;
    	opacity: 0;
    }
    </style>
</head>
<body>
<div class="svg-container" style="max-width:{$width};">
    <svg preserveAspectRatio="xMidYMin meet">
    	 <defs>
    			 <filter id="feDisplacementMap" 
    				filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
    					<feTurbulence type="fractalNoise" baseFrequency="0.{$fractal-size}" numOctaves="1" seed="1" stitchTiles="noStitch" result="img"/>
    					<feDisplacementMap in="SourceGraphic" in2="img" xChannelSelector="R" yChannelSelector="G" scale="600">
    				 		<animate attributeName="scale"
    				 		values="600;0;0" keyTimes="0;0.75;1" keySpines="0.4, 0.0, 0.2, 1" begin="mask.mouseover" dur="{$speed}ms" fill="freeze"/>
    	<animate attributeName="scale"
    				 		values="0;600;600" keyTimes="0;0.75;1" keySpines="0.4, 0.0, 0.2, 1" begin="mask.mouseout" dur="{$speed}ms" fill="freeze"/>
    				 	</feDisplacementMap>
    			 </filter>
    	 </defs>
    	 <g filter="url(#feDisplacementMap)">
    			 <image xlink:href="{$url}" width="100%" height="100%"/>
    	 </g>
    	 <rect id="mask" x="0px" y="0px" width="100%" height="100%" opacity="0"/>
    </svg>
    <img id="imageNoiseBase" width="100%" style="max-width:{$width};" src="{$url}" {$alt}="{$alt-text}"/>
</div>
<script>
    const inputURL = "{$url}";
    const baseImage = document.getElementById("imageNoiseBase");
    const svgImageBase = document.querySelectorAll("svg image")[0];	
    try {
    	let testURL;
    	testURL = new URL(inputURL);
    } catch (_) {
    	var imageURL = new URL("{$url}", /.*(local\-\-html\/([^\/]+)\/)/g.exec(document.location)[0].replace(/local\-\-html/i, 'local--files')).href;
    	baseImage.src = imageURL;
    	svgImageBase.setAttribute("xlink:href", `${imageURL}`);
    }
    if (location.protocol === 'https:') {
    		baseImage.src = baseImage.src.replace(/^http:\/\//i, 'https://');
    } else {
    		baseImage.src = baseImage.src.replace(/^https:\/\//i, 'http://');
    }
    scaleSVG = () => {
    	const svgImage = document.getElementsByTagName("svg")[0];
    	const imageNoiseBase = document.getElementById("imageNoiseBase");
    	const imageRatio = imageNoiseBase.height / imageNoiseBase.width;
    	const svgImageWidthBase = "{$width}";	
    	let svgImageWidth = parseFloat(svgImageWidthBase.replace(/[^-\d\.]/g, ''));
    	let svgImageWidthUnits = svgImageWidthBase.replace(/[0-9]|\./g, "")	
    	let svgImageHeight = svgImageWidth * imageRatio;	
    	
    	if(svgImageWidthUnits === "rem") {
    		svgImageWidth = svgImageWidth * 16;
    		svgImageHeight = svgImageHeight * 16;
    		svgImageWidthUnits = "px";
    	};
    	if(svgImageWidthUnits === "em") {
    		let emSize = parseFloat(getComputedStyle(parentElement).fontSize);
    		svgImageWidth = svgImageWidth * emSize;
    		svgImageHeight = svgImageHeight * emSize;
    		svgImageWidthUnits = "px";
    	};	
    	
    	svgImage.setAttribute("width", svgImageWidth + svgImageWidthUnits);
    	svgImage.setAttribute("height", svgImageHeight + svgImageWidthUnits);
    	var svgViewport = `0 0 ' ${svgImageWidth} ${svgImageHeight}`;
    	svgImage.setAttribute("viewBox", svgViewport);	
    };
    baseImage.src = baseImage.src + "?_="+(new Date().getTime());
    baseImage.onload = () => {
    	scaleSVG();
    };
</script>
</body>
[[/html]]
[[/div]]
[[div_ class="scp-image-caption [[#if {$add-caption} | show | hidden ]]"]]
    {$caption}
[[/div]]
[[/div]]
[!----]
[!-- {$pixel-reveal}
[[module css]]
.image-pixelate-reveal.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-pixelate-reveal-image {
    position: relative;
    overflow: hidden;
}
.image-pixelate-reveal-image img.image {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.image-pixelate-reveal-image iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
[[/module]]
[[div_ class="image-pixelate-reveal scp-image-block [[#if {$float} | block-{$align} | nofloat ]]" data-feature="image-feature" style="max-width:{$width};"]]
[[div_ class="image-pixelate-reveal-image"]]
[[image {$url} {$alt}="{$alt-text}"]]
[[html class="image" style="max-width: {$width};"]]
<style>
.hidden {
    display: none;
}
#imagePxlBase {
    width: 100%;
    max-width: {$width};
    -o-object-fit: contain;
       object-fit: contain;
}
</style>
<div id="imagePxlParent">
     <img id="imagePxlBase" width="{$width}" src="{$url}" {$alt}="{$alt-text}"/>
</div>
<script src="https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features-source/modernizr-custom.js"></script>
<script src="https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features-source/pixel-flow.cjs.js"></script>
<script>
    const inputURL = "{$url}";
    const baseImage = document.getElementById("imagePxlBase");
    try {
    	let testURL;
    	testURL = new URL(inputURL);
    } catch (_) {
    	var imageURL = new URL("{$url}", /.*(local\-\-html\/([^\/]+)\/)/g.exec(document.location)[0].replace(/local\-\-html/i, 'local--files')).href;
    	baseImage.src = imageURL;	
    }
    if (location.protocol === 'https:') {
    	baseImage.src = baseImage.src.replace(/^http:\/\//i, 'https://');
    } else {
    	baseImage.src = baseImage.src.replace(/^https:\/\//i, 'http://');
    }
    createPixelImage = () => {
    	const imagePxlParent = document.getElementById("imagePxlParent");
    	const imagePxl = document.getElementById("imagePxlBase");
    	const imageRatio = imagePxl.width/imagePxl.height;
    	if (Modernizr.canvas) {
    		let pixelImage = imagePxl;
    		let pixelFlows = new PixelFlow(pixelImage, { resolution: {$pixel-res} });

    		imagePxlParent.addEventListener("mouseenter", function(){       
    			pixelFlows.simpleanimate(0, {$speed});
    		});
    		imagePxlParent.addEventListener("mouseleave", function(){       
    			pixelFlows.simpleanimate({$pixel-res}, {$speed});
    		});
    		pixelFlows.height = pixelFlows.width * imageRatio;
    	} else {
    		imagePxl.classList.add("hidden");
    	}
    };
    baseImage.src = baseImage.src + "?_="+(new Date().getTime());
    baseImage.onload = () => {
    	createPixelImage();
    };
</script>
[[/html]]
[[/div]]
[[div_ class="scp-image-caption [[#if {$add-caption} | show | hidden ]]"]]
{$caption}
[[/div]]
[[/div]]
[!----]
[!-- {$image-change}
[[module css]]
.image-change.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}

.image-change-image {
    position: relative;
}

.image-change-image,
.image-change-image img.image {
    overflow: hidden;
    -o-object-fit: fill;
    object-fit: fill;
}

.image-change-image .top-image {
    position: relative;
    z-index: 1;
    opacity: 1;
    -webkit-filter: blur(0);
    		filter: blur(0);
    -webkit-transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	-webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    	filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: 
    	opacity {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),			   
    	webkit-filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1),
    		   filter {$speed}ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.image-change-image:hover .top-image {
    opacity: 0;
    -webkit-filter: {$blur-amount}px;
    		filter: {$blur-amount}px;
}

.image-change-image .bottom-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
[[/module]]
[[div_ class="image-change scp-image-block [[#if {$float} | block-{$align} | nofloat ]]" data-feature="image-feature" style="max-width:{$width};"]]
    [[div_ class="image-change-image" style="max-width:{$width};"]]
    [[image {$start-url} class="top-image" style="max-width:{$width};" {$alt1}="{$alt1-text}"]]
    [[image {$hover-url} class="bottom-image" style="max-width:{$width};" {$alt2}="{$alt2-text}"]]
    [[/div]]
    [[div_ class="scp-image-caption [[#if {$add-caption} | show | hidden ]]"]]
    	{$caption}
    [[/div]]
[[/div]]
[!----]
[!-- {$slide-revealer}
[[module css]]
.image-slide-revealer.nofloat {
    width: {$width} !important;
    max-width: 95vw;
    min-width: initial;
    margin: 0 auto;
}
.image-slide-revealer-image {
    position: relative;
}
.image-slide-revealer-image img.image {
    opacity: 0;
    pointer-events: none;
}
.image-slide-revealer-image iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
[[/module]]
[[div_ class="image-slide-revealer scp-image-block [[#if {$float} | block-{$align} | nofloat ]]" data-feature="image-feature"]]
[[div_ class="image-slide-revealer-image" style="max-width:{$width};"]]
[[html]]
<head>
<style>
html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
       -moz-box-sizing: inherit;
            box-sizing: inherit;
}

body {
    margin: 0;
    height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.revealer {
    position: relative;
    width: {$width};
    height: auto;
}

.revealer .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;	
}

.revealer #sliderImageBase {
    pointer-events: none;
    height: 100%;
    opacity: 0;	
}

.revealer #top-img {
    width: {$slider-start-percent}%;
    z-index: 2;
}

.revealer #btm-img {
    z-index: 1;
    -o-object-fit: cover;
       object-fit: cover;
}

.revealer .slider {
    position: absolute;
    background-color: rgba(0,0,0,0);
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    width: 100%;
    height: 100%;
    outline: none;
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 3;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.revealer .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: -webkit-calc({$slider-circle-size} * 0.2);
    width: -moz-calc({$slider-circle-size} * 0.2);
    width: calc({$slider-circle-size} * 0.2);
    height: 100vh;
    border: none;
    background: {$slider-color};
    cursor: pointer;
}

.revealer .slider::-moz-range-thumb {
    width: -webkit-calc({$slider-circle-size} * 0.2);
    width: -moz-calc({$slider-circle-size} * 0.2);
    width: calc({$slider-circle-size} * 0.2);
    height: 100vh;
    border: none;
    background: {$slider-color};
    cursor: pointer;
}

.revealer #slider-button {
    --button-arrow-color: rgb(93, 93, 93);
    pointer-events: none;
    position: absolute;
    z-index: 4;
    width: {$slider-circle-size};
    height: {$slider-circle-size};
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    background-color: {$slider-color};
    left: -webkit-calc(({$slider-start-percent}% - ({$slider-circle-size} * 0.2)) - ({$slider-circle-size} * 0.2));
    left: -moz-calc(({$slider-start-percent}% - ({$slider-circle-size} * 0.2)) - ({$slider-circle-size} * 0.2));
    left: calc(({$slider-start-percent}% - ({$slider-circle-size} * 0.2)) - ({$slider-circle-size} * 0.2));
    top: -webkit-calc(50% - ({$slider-circle-size} * 0.5));
    top: -moz-calc(50% - ({$slider-circle-size} * 0.5));
    top: calc(50% - ({$slider-circle-size} * 0.5));
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.revealer #slider-button:after {
    content: "";
    padding: -webkit-calc(({$slider-circle-size} * 0.1));
    padding: -moz-calc(({$slider-circle-size} * 0.1));
    padding: calc(({$slider-circle-size} * 0.1));
    display: inline-block;
    border: solid var(--button-arrow-color);
    border-width: 0 -webkit-calc({$slider-circle-size} * (1/15)) -webkit-calc({$slider-circle-size} * (1/15)) 0;
    border-width: 0 -moz-calc({$slider-circle-size} * (1/15)) -moz-calc({$slider-circle-size} * (1/15)) 0;
    border-width: 0 calc({$slider-circle-size} * (1/15)) calc({$slider-circle-size} * (1/15)) 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.revealer #slider-button:before {
    content: "";
    padding: -webkit-calc(({$slider-circle-size} * 0.1));
    padding: -moz-calc(({$slider-circle-size} * 0.1));
    padding: calc(({$slider-circle-size} * 0.1));
    display: inline-block;
    border: solid var(--button-arrow-color);
    border-width: 0 -webkit-calc({$slider-circle-size} * (1/15)) -webkit-calc({$slider-circle-size} * (1/15)) 0;
    border-width: 0 -moz-calc({$slider-circle-size} * (1/15)) -moz-calc({$slider-circle-size} * (1/15)) 0;
    border-width: 0 calc({$slider-circle-size} * (1/15)) calc({$slider-circle-size} * (1/15)) 0;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
</head>
<body>
    <div class="revealer" id="sliderImageParent" width="{$width}" height="">
    	<div role="img" class="img" id="top-img" {$alt1}="{$alt1-text}"></div>
    	<div role="img" class="img" id="btm-img" {$alt2}="{$alt2-text}"></div>
    	<input type="range" min="0" max="99" value="{$slider-start-percent}" class="slider" name="slider" id="slider">
    	<div id="slider-button"></div>
    	<img id="sliderImageBase" width="100%" style="max-width:{$width};" src="{$left-url}" {$alt1}="{$alt1-text}" />
    </div>

    <script>
    const inputLeftURL = "{$left-url}";
    const inputRightURL = "{$right-url}";
    const topImg = document.getElementById("top-img");
    const btmImg = document.getElementById("btm-img");
    const baseImage = document.getElementById("sliderImageBase");	
    const sliderButton = document.getElementById("slider-button");
    const sliderArrowBG = window.getComputedStyle(sliderButton).backgroundColor.replace(/[a-z]|\(|\)/g, "").replace(/[^0-9|\s]/g, "").split(' ');
    let sliderArrowColor;

    const testValidURL = (inputURL) => {
    	let validURL;
    	try {
    		validURL = new URL(inputURL);
    	} catch (_) {
    		let validURL = new URL(inputURL, /.*(local\-\-html\/([^\/]+)\/)/g.exec(document.location)[0].replace(/local\-\-html/i, "local--files")).href;
    		inputURL = validURL + "?_="+(new Date().getTime());
    	}
    	if (location.protocol === "https:") {
    		inputURL = inputURL.replace(/^http:\/\//i, "https://");
    	} else {
    		inputURL = inputURL.replace(/^https:\/\//i, "http://");
    	}
    	return inputURL;
    }
    const setBackgroundSize = (elem, size) => {	
    	$(elem).css("-webkit-background-size", size);
    	$(elem).css("-moz-background-size", size);	
    	$(elem).css("-o-background-size", size);	
    	$(elem).css("background-size", size);		
    }	

    const resizeImage = () => {
    	let baseImageParent = document.getElementById("sliderImageParent");
    	let imageWidth = baseImage.width;
    	let imageHeight = baseImage.height;
    	
    	sliderArrowColor = setSliderArrowColor(sliderArrowBG);
    	
    	baseImageParent.setAttribute("width", `${imageWidth}px`);
    	baseImageParent.setAttribute("height", `${imageHeight}px`);
    	setBackgroundSize(topImg, `${imageWidth}px 100%`);
    	setBackgroundSize(btmImg, `${imageWidth}px 100%`);
    }

    const insertResizeImage = () => {
    	$(topImg).css("background-image", `url("${testValidURL(inputLeftURL)}")`);
    	$(btmImg).css("background-image", `url("${testValidURL(inputRightURL)}")`);
    	
    	resizeImage();
    }

    let setSliderArrowColor = (color) => {
    	let sum = Math.round(((parseInt(color[0]) * 299) + (parseInt(color[1]) * 587) + (parseInt(color[2]) * 114)) / 1000);
    	console.log("color: " + color);
    	console.log("sum: " + sum);
    	return (sum > 128) ? "black" : "white";
    }
    
    $(function() {
    	baseImage.src = testValidURL(inputLeftURL);

    	baseImage.onload = () => {
    		sliderArrowColor = setSliderArrowColor(sliderArrowBG);		
    		console.log("sliderArrowColor: " + sliderArrowColor);
    		sliderButton.style.setProperty("--button-arrow-color", `${sliderArrowColor}`);		
    		window.addEventListener("resize", resizeImage);
    		insertResizeImage();
    		$("#slider").on("input change", (e)=>{
    			const sliderPos = e.target.value;
    			$("#top-img").css("width", `${sliderPos}%`)
    			sliderButton.setAttribute("style", `
    				--button-arrow-color: ${sliderArrowColor};
    				left: -webkit-calc((${sliderPos}% - ({$slider-circle-size} * 0.2)) - ({$slider-circle-size} * 0.2)); 
    				left: -moz-calc((${sliderPos}% - ({$slider-circle-size} * 0.2)) - ({$slider-circle-size} * 0.2)); 
    				left: calc((${sliderPos}% - ({$slider-circle-size} * 0.2)) - ({$slider-circle-size} * 0.2));
    			`);
    		});
    	}
    });
    </script>
</body>
[[/html]]
[[image {$left-url} {$alt}="{$alt-text}"]]
[[/div]]
[[div_ class="scp-image-caption [[#if {$add-caption} | show | hidden ]]"]]
    {$caption}
[[/div]]
[[/div]]
[!----]

Image Features Source

Module Styles

Inline Styles

Includes

CSS Classes

Page Source