<div class="gallery" id="theGallery">
	<a href="#" class="imageWrapper">
		<div class="imageBox">
			<img src="https://www.sonymusic.co.jp/adm_image/official_top/pickup_artist/1000950/6.jpg" />
		</div>
	</a>
	<a href="#" class="imageWrapper">
		<div class="imageBox">
			<img src="https://assets.codepen.io/246628/yori.jpg" />
		</div>
	</a>
	<a href="#" class="imageWrapper">
		<div class="imageBox">
			<img src="https://images.unsplash.com/photo-1637414364584-fe357443c001?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzODM1MjE4OQ&ixlib=rb-1.2.1&q=85" />
		</div>
	</a>
	<a href="#" class="imageWrapper">
		<div class="imageBox">
			<img src="https://images.unsplash.com/photo-1636750308680-f5a8468c9e9b?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzODM1MjEyMw&ixlib=rb-1.2.1&q=85" />
		</div>
	</a>
	<a href="#" class="imageWrapper">
		<div class="imageBox">
			<img src="https://images.unsplash.com/photo-1636244411431-e4ac0ce7b52d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzODM1MjA0Nw&ixlib=rb-1.2.1&q=85" />
		</div>
	</a>
</div>

html,
body {
	height: 100%;
}

.gallery {
	display: flex;
	padding: 20px;
}

.imageWrapper {
	margin-right: 20px;
	position: relative;
	width:calc((100% - 80px) / 5);
	padding-top:calc((100% - 80px) / 5);
	&:last-child {
		margin-right: 0;
	}
	&:hover {
		.imageBox {
			transform:scale(1.05) translate3d(0,0,0);
		}
		.shadow-blur {
			bottom:-62px;
			transform:scale(0.95);
			// filter:blur(15px);
		}
	}
	.shadow-blur {
		z-index:-1;
		filter: blur(12px);
		width: calc(100% + 40px);
		height: calc(100% + 40px);
		position: absolute;
		left: -20px;
		bottom: -60px;
		transition:all 0.5s;
		opacity:0.8;
		.shadow-mask {
			clip-path: inset(35px 35px 35px 35px round 60px 60px 60px 60px);
			width: 100%;
			height: 100%;
			position: relative;
			background-position: center bottom;
		background-size: cover;
		}
	}

	.imageBox {
		width: 100%;
		height: 100%;
		border-radius: 5px;
		overflow: hidden;
		transition: transform 0.5s;
		position: absolute;
		top: 0;right: 0;bottom: 0;left: 0;
		transform: translate3d(0,0,0); 
		img {
			display: block;
			height:100%;
			position: absolute;
			left:50%;
			transform:translateX(-50%);
		}
	}
}

const gallery = document.getElementById('theGallery')
let images = gallery.children

console.log(images.length)
console.log(images)

window.onload = () => {
	for(const image of images){
		if(image.classList.contains("imageWrapper")){
			// Get the image information
			console.log(image)

			const imgItem = image.querySelector('img')
			const imgSrc = imgItem.getAttribute('src')

			const shadowWrapper = document.createElement('div')
			shadowWrapper.classList.add("shadow-blur");
			const shadowImage = document.createElement('div')
			shadowImage.classList.add("shadow-mask")
			shadowImage.style.cssText = `background-image: url(${imgSrc})`

			shadowWrapper.appendChild(shadowImage)

			// Add to the DOM
			image.appendChild(shadowWrapper)
		}
	}
}