www.kontakt-bamberg.de/assets/_gallery.scss

86 lines
1.2 KiB
SCSS
Raw Normal View History

2023-03-12 00:13:25 +01:00
@import 'breakpoints';
@import 'colors';
.gallery {
display: flex;
flex-wrap: wrap;
gap: 1rem;
2023-03-13 00:59:21 +01:00
& > a {
2023-03-12 00:13:25 +01:00
&.blur-on-hover {
overflow: hidden;
2023-03-12 00:13:25 +01:00
&:hover img {
filter: blur(5px);
transform: scale(120%);
}
img {
transition: all 500ms;
}
}
2023-03-13 00:59:21 +01:00
img {
display: block;
height: 280px;
object-fit: cover;
width: 280px;
}
2023-03-12 00:13:25 +01:00
p {
background: rgba($color-overlay, 0.9);
color: $color-overlay-text;
margin-bottom: 0;
padding: 0.5em 1em;
position: absolute;
transform: translateY(-100%);
width: 280px;
}
}
2023-03-13 00:59:21 +01:00
.slide {
background: rgba($color-overlay, 0.7);
display: none;
height: 100vh;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 2;
&:target {
display: flex;
}
a {
color: $color-overlay-text;
display: block;
text-decoration: none;
&:hover {
text-decoration: underline;
}
2023-03-13 00:59:21 +01:00
}
img {
display: block;
height: 100%;
object-fit: scale-down;
width: 100%;
}
p {
background: rgba($color-overlay, 0.9);
bottom: 0;
display: flex;
justify-content: space-between;
margin-bottom: 0;
padding: 0.5em 1.5em;
position: absolute;
width: 100vw;
z-index: 3;
}
2023-03-12 00:13:25 +01:00
}
}