/* Code By Webdevtrick ( https://webdevtrick.com ) */
:root {
–offset: 1rem;
}
*, *:before, *:after {
box-sizing: border-box;
}
header {
padding: 1rem;
font-family: ‘Odibee Sans’, cursive;
font-size: 2em;
}
h1 {
margin-top: 0;
color: #212121;
}
@media (min-width: 40em) {
body {
display: grid;
grid-template-columns: 1fr 3fr;
}
}
img,
a {
display: block;
height: 100%;
}
img {
max-width: 100%;
width: 100%;
object-fit: cover;
}
.grid {
display: grid;
grid-gap: 0;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
height: 100vh;
}
.grid li {
position: relative;
}
.grid li:hover ~ li:last-child:after,
.grid li:last-child:hover:after,
.grid li:hover ~ li:last-child:before,
.grid li:last-child:hover:before {
opacity: 1;
transition: 1s ease;
}
.grid li:last-child:after,
.grid li:last-child:before {
content: “”;
position: absolute;
width: 100%;
height: 100%;
top: 0;
pointer-events: none;
clip-path: polygon(var(–offset) var(–offset), var(–offset) calc(100% – var(–offset)), calc(100% – var(–offset)) calc(100% – var(–offset)), calc(100% – var(–offset)) var(–offset));
-webkit-clip-path: polygon(var(–offset) var(–offset), var(–offset) calc(100% – var(–offset)), calc(100% – var(–offset)) calc(100% – var(–offset)), calc(100% – var(–offset)) var(–offset));
opacity: 0;
transition: opacity 1s, transform 1s 1s, background 1s;
}
.grid li:last-child:after {
mix-blend-mode: multiply;
background: #aaafc3;
}
.grid li:last-child:before {
backdrop-filter: grayscale(100%) blur(2px);
-webkit-backdrop-filter: grayscale(100%) blur(2px);
}
.grid li:nth-child(1):hover ~ li:last-child:after {
background: #2ab1ce;
}
.grid li:nth-child(2):hover ~ li:last-child:after {
background: #4267b2;
}
.grid li:nth-child(3):hover ~ li:last-child:after {
background: #e64786;
}
.grid li:nth-child(4):hover ~ li:last-child:after {
background: #fd2914;
}
.grid li:nth-child(5):hover ~ li:last-child:after {
background: #fbb016;
}
.grid li:nth-child(6):hover ~ li:last-child:after {
background: #6bca6c;
}
.grid li:nth-child(7):hover ~ li:last-child:after {
background: #173b51;
}
.grid li:last-child:hover:after {
background: #ff6d34;
}
.grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 33.3333333333%);
}
.grid li:last-child:after,
.grid li:last-child:before {
left: 100%;
transform: translate3d(-100%, -100%, 0);
}
.grid li:nth-child(1):hover ~ li:last-child:after,
.grid li:nth-child(1):hover ~ li:last-child:before {
transform: translate3d(-200%, -200%, 0);
}
.grid li:nth-child(2):hover ~ li:last-child:after,
.grid li:nth-child(2):hover ~ li:last-child:before {
transform: translate3d(-100%, -200%, 0);
}
.grid li:nth-child(3):hover ~ li:last-child:after,
.grid li:nth-child(3):hover ~ li:last-child:before {
transform: translate3d(0%, -200%, 0);
}
.grid li:nth-child(4):hover ~ li:last-child:after,
.grid li:nth-child(4):hover ~ li:last-child:before {
transform: translate3d(-200%, -100%, 0);
}
.grid li:nth-child(5):hover ~ li:last-child:after,
.grid li:nth-child(5):hover ~ li:last-child:before {
transform: translate3d(-100%, -100%, 0);
}
.grid li:nth-child(6):hover ~ li:last-child:after,
.grid li:nth-child(6):hover ~ li:last-child:before {
transform: translate3d(0%, -100%, 0);
}
.grid li:nth-child(7):hover ~ li:last-child:after,
.grid li:nth-child(7):hover ~ li:last-child:before {
transform: translate3d(-200%, 0%, 0);
}
.grid li:last-child:hover:after,
.grid li:last-child:hover:before {
transform: translate3d(-100%, 0%, 0);
}
@media (max-width: 60em) {
.grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 25%);
}
.grid li:last-child:after,
.grid li:last-child:before {
left: 0%;
transform: translate3d(-50%, -150%, 0);
}
.grid li:nth-child(1):hover ~ li:last-child:after,
.grid li:nth-child(1):hover ~ li:last-child:before {
transform: translate3d(-100%, -300%, 0);
}
.grid li:nth-child(2):hover ~ li:last-child:after,
.grid li:nth-child(2):hover ~ li:last-child:before {
transform: translate3d(0%, -300%, 0);
}
.grid li:nth-child(3):hover ~ li:last-child:after,
.grid li:nth-child(3):hover ~ li:last-child:before {
transform: translate3d(-100%, -200%, 0);
}
.grid li:nth-child(4):hover ~ li:last-child:after,
.grid li:nth-child(4):hover ~ li:last-child:before {
transform: translate3d(0%, -200%, 0);
}
.grid li:nth-child(5):hover ~ li:last-child:after,
.grid li:nth-child(5):hover ~ li:last-child:before {
transform: translate3d(-100%, -100%, 0);
}
.grid li:nth-child(6):hover ~ li:last-child:after,
.grid li:nth-child(6):hover ~ li:last-child:before {
transform: translate3d(0%, -100%, 0);
}
.grid li:nth-child(7):hover ~ li:last-child:after,
.grid li:nth-child(7):hover ~ li:last-child:before {
transform: translate3d(-100%, 0%, 0);
}
.grid li:last-child:hover:after,
.grid li:last-child:hover:before {
transform: translate3d(0%, 0%, 0);
}
:root {
–offset: 0;
}
}
.description {
font-family: “Unica One”, sans-serif;
font-size: 1.25rem;
position: absolute;
display: block;
right: 2rem;
left: 2rem;
text-align: center;
top: 50%;
width: 60px;
margin: auto;
color: white;
z-index: 100;
opacity: 0;
transform: translate3d(0, -50%, 0);
transition: .3s 0s;
}
li:hover .description {
opacity: 1;
transition: .6s .3s;
}
