<div id=design>
	<img src=photo-1511692277506-3be3a7ab1686 />
</div>
#design {
	position: relative; width: 300px; height: 300px;
	margin: auto; margin-top: 100px;	
	box-shadow: 0 0 20px #bac3c3;
}

img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#design:before,
#design:after {
	content: " ";
	position: absolute;
	width: 100%;
	height: 100%;
	
	box-sizing: border-box;
	filter: drop-shadow(0 0 10px #eb311f);
	transition: 2s ease-in-out;
	transform: rotate(45deg);
}

#design:before {
	border-top: 15px #eb311f solid;
	border-bottom: 15px #eb311f solid;
}
#design:after {
	border-left: 15px #eb311f solid;
	border-right: 15px #eb311f solid;
}

/* Add rotating effect because we can */
#design:hover:before,
#design:hover:after {
	transform: rotate(315deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.