werobot/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

animation

Browse source
This commit is contained in:
GZod01 2024-06-11 09:14:08 +02:00
parent 48a24578fc
commit 59bd4bbedc
1 changed files with 108 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

96
assets/scss/layouts/photos.scss
View file

@ -1,5 +1,4 @@
.photos-list { .photos-list {
.photos-list-title { .photos-list-title {
margin-bottom: 1em; margin-bottom: 1em;
.fa { .fa {
@ -13,25 +12,24 @@
grid-column-gap: 1.2em; grid-column-gap: 1.2em;
grid-row-gap: 1.2em; grid-row-gap: 1.2em;
justify-content: center; justify-content: center;
&.photos-list-photos-len-1{ &.photos-list-photos-len-1 {
grid-template-columns:repeat(1,1fr); grid-template-columns: repeat(1, 1fr);
.photos-list-item{ .photos-list-item {
width:100%; width: 100%;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
span#caption{ span#caption {
--height:100%; --height: 100%;
--width:100%; --width: 100%;
} }
} }
} }
&.photos-list-photos-len-2{ &.photos-list-photos-len-2 {
grid-template-columns:repeat(2,1fr); grid-template-columns: repeat(2, 1fr);
} }
&.photos-list-photos-len-3{ &.photos-list-photos-len-3 {
grid-template-columns:repeat(3,1fr); grid-template-columns: repeat(3, 1fr);
} }
} }
@ -39,44 +37,48 @@
border-radius: 5px; border-radius: 5px;
height: 17.5em; height: 17.5em;
/*min-width: 14em;*/ /*min-width: 14em;*/
width:17.5em; width: 17.5em;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
opacity: 1; opacity: 1;
display: block; display: block;
transition: opacity 0.2s; transition: opacity 0.2s;
span#caption{ span#caption {
transition: width .5s ease,height .5s ease, border-radius .5s ease, overflow .5s cubic-bezier(1, -0.44, 1, -0.46); transition:
display:block; width 0.5s ease,
background-color:rgba(27, 27,27, 0.7); height 0.5s ease,
color:white; border-radius 0.5s ease,
--width:17.5em; overflow 0.5s cubic-bezier(1, -0.44, 1, -0.46);
width: 0px!important; display: block;
--height:17.5em; background-color: rgba(27, 27, 27, 0.7);
height: 0px!important; color: white;
--width: 17.5em;
width: 0px !important;
--height: 17.5em;
height: 0px !important;
overflow: hidden; overflow: hidden;
word-wrap:break-word; word-wrap: break-word;
word-break:break-word; word-break: break-word;
padding:0px; padding: 0px;
text-decoration:none!important; text-decoration: none !important;
position:relative; position: relative;
left:50%; left: 50%;
top:50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius:100%; border-radius: 100%;
} }
} }
.photos-list-item:hover { .photos-list-item:hover {
opacity: 0.8; opacity: 0.8;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: opacity 0.2s;
span#caption{ span#caption {
width: var(--width)!important; width: var(--width) !important;
height:var(--height)!important; height: var(--height) !important;
overflow: auto; overflow: auto;
padding:10px; padding: 10px;
border-radius:0; border-radius: 0;
animation: in 1s;
} }
} }
@ -84,7 +86,25 @@
float: right; float: right;
} }
} }
@keyframes in {
0% {
overflow: hidden;
}
90% {
overflow: hidden;
}
100% {
overflow: auto;
}
}
// @keyframes out {
// 0% {
// overflow: auto;
// }
// 10% {
// overflow: hidden;
// }
// }
@media (max-width: $responsive-medium) { @media (max-width: $responsive-medium) {
.photos-list { .photos-list {