flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add link to Poster component and make a better hover

Browse Source 
Buttons are now under the image, creating a parallax scale effect
This commit is contained in:
Félix Péault
2021-11-05 12:57:15 +01:00
parent b8d1d6334c
commit 2e05f00b68
2 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/style/molecules/_poster.scss
View File

@@ -9,7 +9,16 @@
max-width: 600px;
}
& > a {
display: block;
pointer-events: none;
}
// Poster image
img {
pointer-events: auto;
position: relative;
z-index: 2;
display: block;
width: 100%;
height: auto;
@@ -21,26 +30,26 @@
transition: transform 0.8s var(--ease-quart), border-radius 0.8s var(--ease-quart);
}
// Buttons
.buttons {
display: flex;
margin-top: 40px;
justify-content: center;
// opacity: 0;
transform: translate3d(0, 48px, 0);
transition: transform 0.8s var(--ease-quart), opacity 0.4s var(--ease-quart);
transform: translate3d(0, 100%, 0);
transition: transform 0.8s var(--ease-quart);
@include bp (sm) {
position: absolute;
z-index: 1;
bottom: 4.25%;
left: 0;
width: 100%;
align-items: center;
justify-content: center;
bottom: 14px;
left: 10%;
right: 10%;
}
a {
margin-right: 8px;
margin-left: 8px;
margin: 0 clamp(4px, 0.3vw, 8px);
text-align: center;
}
}
@@ -52,10 +61,7 @@
border-radius: 8px;
}
.buttons {
opacity: 1;
transform: translate3d(0,0,0);
// transition-delay: 50ms;
}
}
}