<h3>bg lattice change on hover</h3>
<div></div>
<img src="air-force-1-shadow-shoes-mN8Glx.png" width=300px alt="" />

div {
	width: 380px;
	height: 380px;
	background: repeat left -17px top -22px/55px 55px
			url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'><foreignObject width='35px' height='35px'><div xmlns='http://www.w3.org/1999/xhtml' style='color:white;font-size:35px'>✦</div></foreignObject></svg>"),
		repeating-linear-gradient(
			to right,
			transparent,
			transparent 50px,
			white 50px,
			white 55px
		),
		repeating-linear-gradient(
			to bottom,
			transparent,
			transparent 50px,
			white 50px,
			white 55px
		),
		linear-gradient(45deg, pink, skyblue);
	grid-area: 2 / 1;
	cursor: pointer;
}

div:hover {
	background: repeating-linear-gradient(
			to right,
			transparent,
			transparent 50px,
			rgb(255 255 255 / 0.5) 50px,
			rgb(255 255 255 / 0.5) 55px
		),
		repeating-linear-gradient(
			to bottom,
			transparent,
			transparent 50px,
			rgb(255 255 255 / 0.5) 50px,
			rgb(255 255 255 / 0.5) 55px
		),
		linear-gradient(45deg, pink, skyblue);
	box-shadow: 10px 10px 20px pink;
}

div:hover + img {
	filter: drop-shadow(10px 10px 20px pink);
}

img {
	grid-area: 2 / 1;
	position: relative;
	top: -40px;
	pointer-events: none;
}

h3 {
	font-family: courier new;
	color: #bbb;
}

body {
	display: grid;
	width: 100vw;
	height: 100vh;
	align-items: center;
	justify-items: center;
	margin: 0;
	grid-template-rows: 30px 400px;
	margin-top: calc(50vh - 215px);
}

@supports (-moz-appearance: none) {
	div {
		background: repeat left -17px top -20px/55px 55px
				url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'><foreignObject width='35px' height='35px'><div xmlns='http://www.w3.org/1999/xhtml' style='color:transparent;text-shadow: 0 0 white;font:35px serif'>✦</div></foreignObject></svg>"),
			repeating-linear-gradient(
				to right,
				transparent,
				transparent 50px,
				white 50px,
				white 55px
			),
			repeating-linear-gradient(
				to bottom,
				transparent,
				transparent 50px,
				white 50px,
				white 55px
			),
			linear-gradient(45deg, pink, skyblue);
	}
}