63 lines
1.4 KiB
Sass
63 lines
1.4 KiB
Sass
/*******************************************************/
|
|
/****************** ## Gallery Area ********************/
|
|
/*******************************************************/
|
|
.gallery-area
|
|
&:before
|
|
+poLB(0)
|
|
z-index: -1
|
|
content: ''
|
|
+size(100%, 40%)
|
|
background: $lighter-color
|
|
|
|
.gallery-item
|
|
position: relative
|
|
margin-bottom: 30px
|
|
.gallery-image
|
|
img
|
|
width: 100%
|
|
.gallery-content
|
|
opacity: 0
|
|
transition: 0.5s
|
|
flex-wrap: wrap
|
|
+poLB(50%, 50px)
|
|
background: white
|
|
padding: 24px 30px 22px
|
|
width: calc(100% - 90px)
|
|
transform: translate(-50%)
|
|
+flexcenter(space-between)
|
|
+res-bl(md)
|
|
width: calc(100% - 40px)
|
|
h5
|
|
margin-bottom: 0
|
|
&:hover
|
|
.gallery-content
|
|
opacity: 1
|
|
bottom: 30px
|
|
|
|
/* Galery Style Two */
|
|
.gallery-item-two
|
|
margin-bottom: 30px
|
|
img
|
|
+res-bl(xl)
|
|
width: 100%
|
|
|
|
.gallery-order
|
|
+res-bl(xl)
|
|
order: 5
|
|
|
|
/* Gallery Style Three */
|
|
.gallery-item-three
|
|
margin-bottom: 60px
|
|
img
|
|
width: 100%
|
|
margin-bottom: 30px
|
|
h3
|
|
margin-bottom: 0
|
|
+res-ab(xl)
|
|
font-size: 35px
|
|
|
|
/* Gallery Style Four */
|
|
.gallery-item-four
|
|
margin-bottom: 30px
|
|
img
|
|
width: 100% |