틀:이미지 항목/스타일.css

.ts--imageitem-container {
	position: relative;
	display: flex;
	flex-direction: column;
}

.ts--imageitem-image {
	margin: 0;
	width: 100%;
}

.ts--imageitem-image > img {
	width: 100%;
}

.ts--imageitem-imagelink {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.ts--imageitem-imagelink > a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
	background: linear-gradient( to bottom, rgba(0,0,0,0.4) 0%, transparent 40%, transparent);
	opacity: 0;
	transition: opacity .135s cubic-bezier(0,0,.2,1);
}

.ts--imageitem-imagelink > a:hover {
	opacity: 1;
}

.ts--imageitem-imagelink > a:active {
	box-shadow: 0 0 0 2px var(--color-progressive);
	transition-duration: 0s;
}

.ts--imageitem-blur-background {
	position: absolute;
	width: 100%;
	z-index: -1;
}

.ts--imageitem-blur-background > img {
	filter: blur(2em) brightness(0.6) saturate(3);
	width: 200%;
	transform: translateX(-25%) translateY(-50%);
}

.ts--imageitem-caption {
	display: flex;
	width: 100%;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.ts--imageitem-caption a {
	color: white;
	padding: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}