body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(dimgray, black);
}

.error {
	display: flex;
	width: 33em;
	justify-content: space-between;
}

.error > * {
	width: 10em;
	height: 10em;
	position: relative;
}

.error span {
	position: absolute;
	box-sizing: border-box;
	filter: opacity(0.8);
	transition: 0.3s;
}

.four span:nth-child(1) {
	width: 20%;
	height: 80%;
	left: 10%;
	background-color: yellowgreen;
}

.four span:nth-child(2) {
	width: 100%;
	height: 20%;
	top: 50%;
	background-color: turquoise;
}

.four span:nth-child(3) {
	width: 20%;
	height: 100%;
	right: 10%;
	background-color: pink;
}

.zero span:nth-child(1) {
	width: 20%;
	height: 100%;
	left: 10%;
	background-color: skyblue;
}

.zero span:nth-child(2) {
	width: 100%;
	height: 20%;
	top: 10%;
	background-color: plum;
}

.zero span:nth-child(3) {
	width: 20%;
	height: 100%;
	right: 10%;
	background-color: lightcoral;
}

.zero span:nth-child(4) {
	width: 100%;
	height: 20%;
	bottom: 10%;
	background-color: peachpuff;
}

.error:hover span {
	background-color: whitesmoke;
}

.error:hover .four span:nth-child(1) {
	left: 0;
	top: 20%;
}

.error:hover .four span:nth-child(2) {
	top: 0;
}

.error:hover .four span:nth-child(3) {
	right: 0;
}

.error:hover .zero span:nth-child(1) {
	left: 0;
}

.error:hover .zero span:nth-child(2) {
	top: 0;
}

.error:hover .zero span:nth-child(3) {
	right: 0;
}

.error:hover .zero span:nth-child(4) {
	bottom: 0;
}