<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.