56 lines
1.1 KiB
Stylus
56 lines
1.1 KiB
Stylus
|
|
||
|
|
.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
|