67 lines
1.6 KiB
Sass
67 lines
1.6 KiB
Sass
.carousel
|
|
width: 100vw
|
|
max-width: 1000px
|
|
padding-bottom: 100px
|
|
border-radius: 10px
|
|
overflow: hidden
|
|
padding: 0
|
|
margin-bottom: 20px
|
|
|
|
.slide
|
|
--transition-time: .5s
|
|
// position: relative
|
|
transition: var(--transition-time) filter
|
|
-webkit-transition: var(--transition-time) -webkit-filter
|
|
-moz-transition: var(--transition-time) -moz-filter
|
|
-ms-transition: var(--transition-time) -ms-filter
|
|
-o-transition: var(--transition-time) -o-filter
|
|
|
|
width: 100vw
|
|
max-width: 1000px
|
|
height: 50vw
|
|
max-height: 500px
|
|
background-size: 100%
|
|
background-repeat: no-repeat
|
|
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
z-index: 5
|
|
|
|
.bgimg
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
transition: var(--transition-time) filter
|
|
-webkit-transition: var(--transition-time) -webkit-filter
|
|
-moz-transition: var(--transition-time) -moz-filter
|
|
-ms-transition: var(--transition-time) -ms-filter
|
|
-o-transition: var(--transition-time) -o-filter
|
|
z-index: 6
|
|
|
|
&:hover .bgimg
|
|
filter: blur(3px)
|
|
|
|
.overlay
|
|
width: 100%
|
|
height: 100%
|
|
max-width: 1000px
|
|
background-color: rgba(47,80,112,.8)
|
|
// margin: 10vw
|
|
// display: none
|
|
opacity: 0
|
|
z-index: 7
|
|
transition: opacity .25s
|
|
|
|
padding: 0 50px
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
|
|
&:hover .overlay
|
|
opacity: 1
|