Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save djsubstance/05936b17e2361704afc88147d509bea8 to your computer and use it in GitHub Desktop.
Save djsubstance/05936b17e2361704afc88147d509bea8 to your computer and use it in GitHub Desktop.
Circular Corner Borders 3D Hover Image (CSS Only)

Circular Corner Borders 3D Hover Image (CSS Only)

Hover image effect with corner borders. CSS only

A Pen by substance on CodePen.

License.

<div>
<picture>
<img src="https://picsum.photos/id/977/1600/800" alt="mushroom" width="400" height="200">
</picture>
<div></div>
<div></div>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
font-family: "Noto Sans Mono", monospace;
}
body,
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 12pt;
line-height: 18pt;
font-weight: 400;
color: lawngreen;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #222;
margin: 0;
padding: 0;
}
@keyframes dots {
0% {
background-position: 30px 30px, 50px 50px;
}
50% {
background-position: 0px 0px, 15px 15px;
}
100% {
background-position: 30px 30px, 50px 50px;
}
}
div:nth-child(1) {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: black;
width: 400px;
height: 200px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px;
border-radius: 10px;
transform-style: preserve-3d;
outline: 1px solid lawngreen;
outline-offset: -15px;
outline-style: groove;
z-index: 1;
transition: all 0.3s ease-in-out;
}
div > div:nth-child(2),
div > div:nth-child(3),
div:nth-child(1)::before,
div:nth-child(1)::after {
position: absolute;
width: 60px;
height: 60px;
border-radius: 100px;
z-index: -1;
content: "";
border: 2px solid lawngreen;
color: lawngreen;
transition: all 0.3s ease-in-out;
}
div:nth-child(1)::before {
top: -15px;
right: -15px;
}
div:nth-child(1)::after {
bottom: -15px;
left: -15px;
}
div > div:nth-child(2) {
top: -15px;
left: -15px;
}
div > div:nth-child(3) {
bottom: -15px;
right: -15px;
}
div > picture {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
overflow: hidden;
border-radius: 10px;
outline: 1px ridge lawngreen;
outline-offset: -10px;
transform-style: preserve-3d;
z-index: 2;
transition: all 0.3s ease-in-out;
}
div > picture::before {
content: "MUSHROOM";
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
padding: 0px 20px 20px 0px;
position: absolute;
transform: scale(0);
border-radius: 100px;
width: 1%;
height: 1%;
font-size: 30pt;
color: lawngreen;
background-color: transparent;
background-image: radial-gradient(#7cfc00 0.75px, transparent 0.75px),
radial-gradient(#7cfc00 0.75px, #00000055 0.75px);
background-size: 30px 30px;
background-position: 0px 0px, 15px 15px;
opacity: 0;
z-index: 4;
filter: contrast(0%);
text-shadow: 1px 1px 3px black;
mix-blend-mode: overlay;
text-shadow: 1px 1px 5px black;
transition: all 0.3s ease-in-out;
}
div > picture::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: lawngreen;
mix-blend-mode: color-burn;
z-index: 3;
transition: all 0.3s ease-in-out;
}
div:nth-child(1):hover {
transform: rotateX(20deg) rotateY(10deg);
box-shadow: lawngreen 0px 2px 4px, lawngreen 0px 7px 13px -3px;
outline-offset: 60px;
outline-style: dashed;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
div:nth-child(1):hover::before,
div:nth-child(1):hover::after,
div:nth-child(1):hover > div {
width: 100%;
height: 100%;
margin: -20px;
outline-offset: 20px;
transition: all 0.3s ease-in-out;
}
div:nth-child(1):hover > picture {
transform: translateZ(70px) translateX(5px) translateY(10px);
outline-offset: 0px;
transition: all 0.3s ease-in-out;
}
div:nth-child(1):hover > picture::before {
transform: scale(1);
width: 100%;
height: 100%;
opacity: 1;
border-radius: 0px;
background-position: 30px 30px, 50px 50px;
filter: contrast(100%);
animation: dots 12s linear infinite;
animation-direction: forwards;
}
div:nth-child(1):hover > picture::after {
filter: saturate(200%) sepia(20%);
transition: all 0.3s ease-in-out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment