vuesax/dist/style/components/vsImages.styl

Framework Components for Vue js

random(min,max)
  return floor(math(0, 'random')*(max - min + 1) + min)

.vs-images
  // background: rgb(14, 142, 25)
  display: flex
  align-items: flex-start
  justify-content: center
  &.notBorderRadius
    .vs-image, .con-vs-image
      border-radius: 0px !important
  &.alternating
    .vs-image
      &:nth-child(5n)
        width: calc(50% - 4px)
        float right
    &.notMargin
      .vs-image
        &:nth-child(5n)
          width: 50%
  &.notMargin
    .vs-image
      margin: 0px
      width: 25%

.vs-images--ul
  display: flex
  align-items: flex-start
  justify-content: flex-start
  flex-wrap: wrap
  margin: 0px
  padding: 10px
  width: 100%
.vs-image
  width calc(25% - 4px)
  height auto
  // padding-bottom: calc(25% - 8px)
  list-style none
  margin: 2px
  border-radius: 10px
  // overflow hidden
  transition: all .25s ease
  position relative
  float left
  backface-visibility: visible
  cursor pointer


  .con-vs-image
    overflow hidden
    width: 100%
    border-radius: 10px
    z-index 200
    position relative
  .imag-blur
    position absolute
    width: 100%
    bottom: 0px
    border-radius: 10px
    opacity 0
    z-index 100
    transform scale(1)
    filter: blur(5px)
    transition: all .25s ease
.vs-image--img
  background-position: center center;
  width: 100%
  padding-bottom: 100%
  display: block
  position relative
  transition: all .25s ease


.vs-images-hover-blur
  .vs-image
    &:hover
      transform: scale(1.04) translate(0, -2px)
      cursor pointer
      z-index 300
      .imag-blur
        opacity .8
        transform: scale(.9)
        filter: blur(5px)
        bottom: -10px

.vs-images-hover-zoom
  .vs-image
    &:hover
      .vs-image--img
          transform: scale(1.2)

.vs-images-hover-default
  .vs-image
    &:hover
      transform: scale(.9)
      .vs-image--img
          transform: scale(1.3)

.vs-images-hover-dark
  .vs-image
    &:hover
      background: rgba(0,0,0,1)
      border-radius: 20px
      .vs-image--img
          opacity .4
          border-radius: 20px

.vs-images-hover-scale
  .vs-image
    &:hover
      z-index 300
      transform scale(1.15)
      box-shadow: 0px 3px 15px 0px rgba(0,0,0,.3)

.vs-images-hover-curtain
  .vs-image
    overflow hidden
    &:after
      content: ''
      position: absolute
      left 0px
      top: 0px
      background: rgba(0,0,0,.5)
      width: 100%
      height 100%
      z-index 400
      border-radius: inherit
      // transform: scale(.8)
      transform: translate(0, -100%)
      opacity 0
      transition: all .25s ease
    .vs-image--img
      transform scale(1.2) translate(0, -10px)
    &:hover
      .vs-image--img
        transform scale(1.25) translate(0, 10px)
      &:after
        transform: scale(1) translate(0%)
        opacity 1


@media only screen and (max-width: 700px)
  .vs-image
    width: calc(33% - 4px)
@media only screen and (max-width: 550px)
  .vs-image
    width: calc(50% - 4px)
@media only screen and (max-width: 350px)
  .vs-image
    width: calc(100% - 4px)