Пишем код HTML:
Пишем свой стиль:
Смотрим наш результат:
HTML:
<div>
<picture>
<img src="https://picsum.photos/id/977/1600/800" alt="mushroom" width="400" height="200">
</picture>
<div></div>
<div></div>
</div>
Пишем свой стиль:
CSS:
*,
*::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;
}
Смотрим наш результат: