mixin photo (id)
	- const style = `background-image: url(//source.unsplash.com/${id}/600x1200)`
	.photo
		.photo__image(style=style)
		.photo__feather(style=style)


+photo('S3eqr293Vho')
+photo('aIYFR0vbADk')
+photo('sfze-8LfCXI')
View Compiled
$bg: #ebebeb
$scale: 1.5

*,
*::before,
*::after
	box-sizing: inherit

html
	box-sizing: border-box

body
	background: $bg
	min-height: 100vh
	padding: 100px 50px
	display: grid
	grid:
		template-columns: repeat(auto-fit, 200px)
		gap: 150px 100px
	justify-content: center
	align-items: center
	align-content: center
	
.photo
	width: 200px
	height: 300px
	position: relative

	&__image,
	&__feather
		border-radius: 5px
		background-position: center
		width: inherit
		height: inherit

	&__image
		color: rgba(#000, .16)
		box-shadow: 0 2px 4px, 0 4px 8px -1px, 0 8px 16px -2px, 0 16px 32px -4px, 0 32px 64px -8px, 0 64px 128px -16px
		background-size: 100% * $scale
	
	&__feather
		box-shadow: 0 0 10px 10px $bg inset, 0 0 30px 20px $bg inset, 0 0 50px 30px $bg inset
		background-size: 100%
		position: absolute
		top: 0
		z-index: -1
		opacity: .5
		transform: scale($scale)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.