dece/IdreXyz
1
0
Fork 0
Code Releases Activity

artists: funkier hover animations

Browse source
This commit is contained in:
dece 2022-01-17 16:11:47 +01:00
parent 7ed7ad1ea7
commit f891a26f0d
1 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
label/static/label/css/artists.css
View file

@ -29,18 +29,26 @@
transition: 0.3s; transition: 0.3s;
} }
@keyframes logoslide {
0% { background-position: 0%; }
33% { background-position: 100%; }
66% { background-position: 100%; }
100% { background-position: 0%; }
}
.artists .artist .logo { .artists .artist .logo {
height: 160px; height: 160px;
width: 160px; width: 160px;
background-size: cover;
background-color: white; background-color: white;
background-size: auto 100%;
background-position: 0%;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
} }
.artists .artist-genre { .artists .artist-genre {
display: flex; display: flex;
align-items: center; align-items: end;
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -48,13 +56,18 @@
width: 150px; width: 150px;
padding: 5px; padding: 5px;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.6); background-image: linear-gradient(rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.6));
border-radius: 5px; border-radius: 5px;
color: white; color: white;
opacity: 0; opacity: 0;
transition: 0.3s; transition: 0.3s;
pointer-events: none;
} }
.artists .artist-genre:hover { .artists .artist .logo:hover {
animation: logoslide 3s;
}
.artists .artist .logo:hover ~ .artist-genre {
opacity: 1; opacity: 1;
} }