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

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

@ -1,103 +1,123 @@
.photos-list { .photos-list {
.photos-list-title {
.photos-list-title { margin-bottom: 1em;
margin-bottom: 1em; .fa {
.fa { margin-right: 10px;
margin-right: 10px;
}
}
.photos-list-photos {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 1.2em;
grid-row-gap: 1.2em;
justify-content: center;
&.photos-list-photos-len-1{
grid-template-columns:repeat(1,1fr);
.photos-list-item{
width:100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
span#caption{
--height:100%;
--width:100%;
} }
}
}
&.photos-list-photos-len-2{
grid-template-columns:repeat(2,1fr);
}
&.photos-list-photos-len-3{
grid-template-columns:repeat(3,1fr);
}
}
.photos-list-item {
border-radius: 5px;
height: 17.5em;
/*min-width: 14em;*/
width:17.5em;
background-size: cover;
background-position: center;
opacity: 1;
display: block;
transition: opacity 0.2s;
span#caption{
transition: width .5s ease,height .5s ease, border-radius .5s ease, overflow .5s cubic-bezier(1, -0.44, 1, -0.46);
display:block;
background-color:rgba(27, 27,27, 0.7);
color:white;
--width:17.5em;
width: 0px!important;
--height:17.5em;
height: 0px!important;
overflow: hidden;
word-wrap:break-word;
word-break:break-word;
padding:0px;
text-decoration:none!important;
position:relative;
left:50%;
top:50%;
transform: translate(-50%, -50%);
border-radius:100%;
} }
} .photos-list-photos {
.photos-list-item:hover { display: grid;
opacity: 0.8; grid-template-columns: repeat(4, 1fr);
cursor: pointer; grid-column-gap: 1.2em;
transition: opacity 0.2s; grid-row-gap: 1.2em;
span#caption{ justify-content: center;
width: var(--width)!important; &.photos-list-photos-len-1 {
height:var(--height)!important; grid-template-columns: repeat(1, 1fr);
overflow: auto; .photos-list-item {
padding:10px; width: 100%;
border-radius:0; background-size: contain;
background-position: center;
background-repeat: no-repeat;
span#caption {
--height: 100%;
--width: 100%;
}
}
}
&.photos-list-photos-len-2 {
grid-template-columns: repeat(2, 1fr);
}
&.photos-list-photos-len-3 {
grid-template-columns: repeat(3, 1fr);
}
} }
}
.photos-more { .photos-list-item {
float: right; border-radius: 5px;
} height: 17.5em;
/*min-width: 14em;*/
width: 17.5em;
background-size: cover;
background-position: center;
opacity: 1;
display: block;
transition: opacity 0.2s;
span#caption {
transition:
width 0.5s ease,
height 0.5s ease,
border-radius 0.5s ease,
overflow 0.5s cubic-bezier(1, -0.44, 1, -0.46);
display: block;
background-color: rgba(27, 27, 27, 0.7);
color: white;
--width: 17.5em;
width: 0px !important;
--height: 17.5em;
height: 0px !important;
overflow: hidden;
word-wrap: break-word;
word-break: break-word;
padding: 0px;
text-decoration: none !important;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
}
}
.photos-list-item:hover {
opacity: 0.8;
cursor: pointer;
transition: opacity 0.2s;
span#caption {
width: var(--width) !important;
height: var(--height) !important;
overflow: auto;
padding: 10px;
border-radius: 0;
animation: in 1s;
}
}
.photos-more {
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 {
.photos-list-photos { .photos-list-photos {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
/*.photos-list-item { /*.photos-list-item {
min-width: 17.5em; min-width: 17.5em;
span#caption{ span#caption{
width:calc(17.5em - 10px); width:calc(17.5em - 10px);
} }
}*/ }*/
} }
} }