Как вариант без <img>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<nav>
<a href="#" class="default">Default</a>
<a href="#" style="--image: url(https://placeimg.com/640/480/nature); ">Nature</a>
<a href="#" style="--image: url(https://placeimg.com/640/480/tech); ">Tech</a>
<a href="#" style="--image: url(https://placeimg.com/640/480/animals); ">Animals</a>
</nav>
<style>
body {
margin: 0;
overflow: hidden;
height: 100vh;
background: radial-gradient(circle at calc(100vw - 10rem) 25vh, #f1f1f1, #888);
}
nav {
display: grid;
grid-template-columns: 20rem;
align-content: end;
justify-content: end;
height: 100vh;
overflow: auto;
}
a {
padding: .5em 1em;
margin: .5em;
border: .1em solid;
color: deepskyblue;
text-decoration: none;
display: inline-block;
border-radius: .5em;
overflow: auto;
font: bold 200% "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, sans-serif;
}
a.default {
visibility: hidden;
/* order: 1;*/
}
a::after, .default::after {
content: "";
position: fixed;
top: 0; bottom: 0;
left: 0; right: 20rem;
background:
center / cover
no-repeat #333;
background-image:
var(--image, url('https://placeimg.com/800/600/people')),
radial-gradient(#333, black);
padding: 1em;
pointer-events: none;
transition: opacity 350ms 200ms, transform 350ms 200ms, visibility 0s 550ms;
opacity: 0;
transform: scale(2);
visibility: hidden;
will-change: opacity, transform, visibility;
z-index: -1;
}
@media (max-width: 75em) {
a::after, .default::after {
right: 0rem;
}
}
.default::after {
z-index: -2;
}
a:hover::after, .default:after {
opacity: 1;
transform: scale(1);
visibility: visible;
transition: opacity 350ms, transform 350ms, visibility 0s 0s;
}
</style>
</body>
</html>
|