body {
overflow: hidden;
height: 100vh;
display: grid;
place-items: center;
margin: 0;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr auto;
gap: 0px 0px;
grid-template-areas:
"main main main main main main main"
". i1 i2 i3 i4 i5 .";
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
width: 80vmin;
border: 2px solid black;
background-color: black;
}
.gallery {
grid-area: main;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 80vmin;
height: 80vmin;
--pos: 0;
}
.gallery > div {
overflow: hidden;
background-color: white;
width: 20vmin;
height: 20vmin;
display: flex;
}
.gallery > div > div {
flex: 1 0 auto;
width: 100%;
height: 100%;
background-size: 80vmin auto;
transition: transform 0.5s ease-in-out;
}
@for $i from 0 through 3 {
.gallery > div:nth-of-type(4n + #{$i + 1}) > div {
--xpos: #{$i * 20};
}
@for $j from 0 through 3 {
.gallery > div:nth-of-type(#{$j * 4 + $i + 1}) > div {
--ypos: #{$j * 20};
}
}
}
.gallery > div > div {
background-position: calc(var(--xpos) * -1vmin) calc(var(--ypos) * -1vmin);
}
input {
margin: 20px;
}
input:nth-of-type(1) {
grid-area: i1;
}
input:nth-of-type(2) {
grid-area: i2;
}
input:nth-of-type(3) {
grid-area: i3;
}
input:nth-of-type(4) {
grid-area: i4;
}
input:nth-of-type(5) {
grid-area: i5;
}
@for $i from 0 through 4 {
input:nth-of-type(#{$i + 1}):checked ~ .gallery {
--pos: #{$i * 20};
}
}
.north {
flex-direction: column;
}
.east {
flex-direction: row;
}
.south {
flex-direction: column-reverse;
}
.west {
flex-direction: row-reverse;
}
.north > div {
transform: translateY(calc(var(--pos) * -1vmin));
}
.east > div {
transform: translateX(calc(var(--pos) * -1vmin));
}
.south > div {
transform: translateY(calc(var(--pos) * 1vmin));
}
.west > div {
transform: translateX(calc(var(--pos) * 1vmin));
}
Multi Direction Slider Gallery (Pure CSS)
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.