Last active
January 13, 2024 08:33
-
-
Save mitcdh/31d6cd6a567d18637820b1b1b5e9419e to your computer and use it in GitHub Desktop.
SASS to give a responsive photo gallery the slight rotation of pictures spilled across a table effect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$photoRotation: 4deg; // Allows setting the alternating photo rotation | |
$breakpoints: ( | |
1200: 4, | |
// 4 columns for screens wider than 1200px | |
800: 3, | |
// 3 columns for screens wider than 800px | |
600: 2, | |
// 2 columns for screens wider than 600px | |
400: 1 // 1 column for screens wider than 400px, | |
); | |
.photo-box { | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
} | |
.photo-box a { | |
display: inline-block; | |
position: relative; | |
margin: 5px; | |
flex-basis: calc(25% - 10px); // 25% for 4 images in a row, minus margin | |
max-width: 25%; // Ensures no more than 4 images per row | |
text-align: center; | |
z-index: 1; // Low z-index for non-hovered items | |
transform: rotate(-$photoRotation); // Default rotation | |
&:nth-child(even) { | |
transform: rotate(-$photoRotation); // Subtle left rotation for even items | |
} | |
&:nth-child(odd) { | |
transform: rotate($photoRotation); // Subtle right rotation for odd items | |
} | |
img { | |
width: 100%; | |
height: auto; | |
transition: transform 0.4s ease-out; | |
box-shadow: 1.5px 2px 5px #0008; | |
} | |
&:hover { | |
z-index: 999; // High z-index and zoom for hovered items to mimic them being picked up | |
img { | |
transform: scale(2); | |
box-shadow: 3px 4px 10px #0006; | |
} | |
} | |
} | |
// Use the breakpoints map to calculate the correct flex-basis and max-width for each breakpoint | |
@each $breakpoint, $columns in $breakpoints { | |
@media (max-width: #{$breakpoint}px) { | |
.photo-box a { | |
flex-basis: calc(100% /#{$columns} - 10px); | |
max-width: calc(100% /#{$columns}); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment