125 lines
2.5 KiB
SCSS
125 lines
2.5 KiB
SCSS
.movieShowcase {
|
|
background-color: $color-background;
|
|
grid-column: 2 / 13;
|
|
color: #fff;
|
|
|
|
&__heading {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
&__container {
|
|
overflow-y: hidden;
|
|
transition: transform 450ms;
|
|
overflow-x: scroll;
|
|
display: flex;
|
|
width: 95vw;
|
|
overflow: -moz-scrollbars-horizontal;
|
|
|
|
grid-template-columns: repeat(20, 1fr);
|
|
column-gap: 0;
|
|
|
|
@include responsive(phone) {
|
|
width: 98vw;
|
|
}
|
|
|
|
|
|
&:hover &--movie {
|
|
opacity: .3;
|
|
|
|
&:hover {
|
|
transform: scale(1.5);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&:hover > * {
|
|
transform: translate3d(-6rem, 0, 0);
|
|
|
|
@include responsive(tab_port) {
|
|
transform: translate3d(-5rem, 0, 0);
|
|
}
|
|
|
|
@include responsive(phone) {
|
|
transform: translate3d(-3rem, 0, 0);
|
|
}
|
|
}
|
|
|
|
&--movie:hover ~ &--movie {
|
|
transform: translate3d(6rem, 0, 0);
|
|
|
|
@include responsive(tab_port) {
|
|
transform: translate3d(4.5rem, 0, 0);
|
|
}
|
|
|
|
@include responsive(phone) {
|
|
transform: translate3d(2.8rem, 0, 0);
|
|
}
|
|
}
|
|
|
|
|
|
&:hover > &--movie__netflix {
|
|
transform: translate3d(-1rem, 0, 0);
|
|
}
|
|
|
|
&--movie__netflix:hover ~ &--movie__netflix {
|
|
transform: translate3d(1rem, 0, 0);
|
|
}
|
|
|
|
&:hover &--movie__netflix {
|
|
opacity: .3;
|
|
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&--movie {
|
|
cursor: pointer;
|
|
transition: all 450ms;
|
|
transform: center left;
|
|
padding-top: 3.5rem;
|
|
padding-bottom: 4rem;
|
|
height: 21.5rem;
|
|
min-height: 0;
|
|
|
|
@include responsive(tab_port) {
|
|
height: 18.5rem;
|
|
}
|
|
|
|
@include responsive(phone) {
|
|
height: 14rem;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
&-image {
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
&__netflix {
|
|
min-height: 0;
|
|
padding-top: 3rem;
|
|
padding-bottom: 4rem;
|
|
padding-right: 1rem;
|
|
height: 52rem;
|
|
cursor: pointer;
|
|
transition: all 450ms;
|
|
transform: center left;
|
|
|
|
@include responsive(tab_port) {
|
|
height: 42rem;
|
|
}
|
|
@include responsive(phone) {
|
|
height: 34rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|