hexo-theme-ayer/source-src/css/_partial/albums.styl

56 lines
1.1 KiB
Stylus
Raw Normal View History

2019-12-03 11:37:44 +00:00
.article-albums
position relative
.article-albums-photos
position relative
display flex
flex-wrap wrap
list-unstyled()
clearfix()
&::after
content: ''
flex-grow 999999999
.article-albums-item
position relative
flex-grow 1
margin .5rem
overflow hidden
img
object-fit cover
max-width 100%
min-width 100%
vertical-align: center
.article-albums-caption
display block
width 100%
padding 1rem 0
text-align center
// Media Query
@media (min-width: 576px)
.article-albums-item
img
height 32rem
.article-albums-caption
position absolute
bottom 0
left 0
width 100%
background-color rgba(black, .5)
background linear-gradient(to top, rgba(black, .5), transparent)
color white
padding 1rem
opacity 0
transform translateY(100%)
transition(transition-base)
&:hover
.article-albums-caption
opacity 1
transform translateY(0)
@media (min-width: 768px)
.article-albums-item
img
height 20rem