- var cats = ['cheetah', 'cougar', 'leopard', 'lion', 'tiger'];
- var n = cats.length;

style :root { --n: #{n} }
while n--
	article
		h3 #{cats[n]}
		figure
			img(src=`https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_07_art_${cats[n]}.jpg`)
View Compiled
@import 'compass/css3';

$gl: linear-gradient(currentColor, currentColor);

@mixin poly($n: 5, $roff: 0) {
	$p: ();
	$ba: 360deg/$n;
	
	@for $i from 0 to $n {
		$ca: ($roff + $i)*$ba;
		$x: 50%*(1 + cos($ca));
		$y: 50%*(1 + sin($ca));
		$p: $p, $x $y
	}
	--cpval: polygon($p);
	-webkit-clip-path: var(--cpval);
					clip-path: var(--cpval)
}

* { margin: 0; padding: 0 }

html { background: #000 }

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #222 $gl 50%/ 2px repeat-y;
	color: #ddd;
}

article {
	--s: -1;
	display: flex;
	align-items: center;
	height: calc(100vh/var(--n));
	transform: translate(calc(var(--s)*50%));
	
	&:nth-child(2n) {
		--s: 1;
		
		img {
			@include poly($roff: .5);
			
			&:hover { @include poly($roff: -.5) }
		}
	}
}

h3 {
	order: var(--s);
	font: 700 2em segoe script, cursive;
	text-transform: capitalize
}

figure, img { height: 100% }

figure {
	background: $gl calc((1 - var(--s))*50%) 50%/ 50% 2px no-repeat;
	filter: drop-shadow(2px 2px 3px currentcolor)
}

img {
	display: block;
	margin: 0 1em;
	@include poly();
	transition: .7s;
	
	&:hover { @include poly($roff: 1) }
}
View Compiled

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js