mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2025-09-15 12:58:48 +08:00
112 lines
2.1 KiB
Stylus
112 lines
2.1 KiB
Stylus
figure.gallery-group
|
|
position: relative
|
|
float: left
|
|
overflow: hidden
|
|
margin: .3rem .2rem
|
|
width: calc(50% - .4rem)
|
|
height: 250px
|
|
border-radius: 8px
|
|
background: $dark-black
|
|
-webkit-transform: translate3d(0, 0, 0)
|
|
|
|
&:hover
|
|
img
|
|
opacity: .4
|
|
transform: translate3d(0, 0, 0)
|
|
|
|
.gallery-group-name::after
|
|
transform: translate3d(0, 0, 0)
|
|
|
|
p
|
|
opacity: 1
|
|
transform: translate3d(0, 0, 0)
|
|
|
|
img
|
|
position: relative
|
|
margin: 0 !important
|
|
max-width: none
|
|
width: calc(100% + 20px)
|
|
height: 250px
|
|
backface-visibility: hidden
|
|
opacity: .8
|
|
transition: opacity .35s, transform .35s
|
|
transform: translate3d(-10px, 0, 0)
|
|
object-fit: cover
|
|
|
|
figcaption
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
padding: 1.5rem
|
|
width: 100%
|
|
height: 100%
|
|
color: $gallery-color
|
|
text-transform: uppercase
|
|
backface-visibility: hidden
|
|
|
|
& > a
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
bottom: 0
|
|
left: 0
|
|
z-index: 1000
|
|
opacity: 0
|
|
|
|
p
|
|
display: -webkit-box
|
|
overflow: hidden
|
|
margin: 0
|
|
padding: .4rem 0 0
|
|
letter-spacing: 1px
|
|
font-size: .8rem
|
|
line-height: 1.5
|
|
opacity: 0
|
|
transition: opacity .35s, transform .35s
|
|
transform: translate3d(100%, 0, 0)
|
|
-webkit-line-clamp: 4
|
|
-webkit-box-orient: vertical
|
|
|
|
.gallery-group-name
|
|
position: relative
|
|
display: -webkit-box
|
|
overflow: hidden
|
|
margin: 0
|
|
padding: .4rem 0
|
|
font-weight: bold
|
|
font-size: 1.2rem
|
|
line-height: 1.5
|
|
-webkit-line-clamp: 2
|
|
-webkit-box-orient: vertical
|
|
|
|
&:after
|
|
position: absolute
|
|
bottom: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 2px
|
|
background: $gallery-color
|
|
content: ''
|
|
transition: transform .35s
|
|
transform: translate3d(-100%, 0, 0)
|
|
|
|
.gallery-group-main
|
|
overflow: auto
|
|
padding: 0 0 .8rem
|
|
|
|
.justified-gallery
|
|
margin: 0 0 .8rem
|
|
|
|
img
|
|
opacity: 0
|
|
|
|
.img-alt
|
|
display: none
|
|
|
|
.fancybox
|
|
width: auto
|
|
text-align: inherit
|
|
|
|
@media screen and (max-width: 600px)
|
|
figure.gallery-group
|
|
width: calc(100% - .4rem) |