Module:Navpills/styles.css

.template-navpills {
	display:grid;
	gap: 0.2rem;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-auto-rows: 10rem;
	font-size: 0.875rem;
}
.template-navpill {
	position: relative;
	overflow: hidden;
}
.template-navpill-background {
	position: absolute;
}
.template-navpill-background:after {
	content: "";
	position: absolute;
	background: linear-gradient(to right, #000, transparent);
	transition: transform 250ms ease;
}
.template-navpill-background img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: 80ms ease;
	transition-property:transform;
}
.template-navpill:hover .template-navpill-background::after {
	transform: translateX(-100%);
}
.template-navpill:hover .template-navpill-background img {
	transform: scale(1.1);
}
.template-navpill > a {
	position: relative;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	text-decoration: none;
	height: 100%;
}
.template-navpill > .template-navpill-background + a {
	color: #fff;
	text-shadow: -1px 0 .2em #000, 0 1px .2em #000, 1px 0 .2em #000, 0 -1px .2em #000; 
}
.template-navpill:hover {
	background: rgba(255, 255, 255, 0.3);
}
.template-navpill:active {
	filter: brightness(50%);
}