.wps-sn-img {

  position: relative;
  display: inline-block;
  font-size: 0px;

  img {
    max-width: 100%;
  }

  .wps-sn-overlay {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.67);
    /* Transition */
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
  }

  .wps-sn-social {
    position: absolute;
    top:50%;
    margin-top: -20px;
    left: 0;
    right: 0;
    font-size: 12px !important;
    opacity:0;
    visibility: hidden;
    /* Transition */
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;

    ul {
      text-align: center;
      margin: 0px;
      padding: 0px;

      li {
        display: inline-block;
        vertical-align: top;

        a {
          box-shadow: none !important;
          display: inline-block;
          padding: 10px;
          font-size: 14px;
          width: 40px;
          height: 40px;
          text-align: center;
          color: #ffffff;

          &.facebook {
            background: #3b5998;
          }

          &.twitter {
            background: #1da1f2;
          }

          &.google-plus {
            background: #dd4b39;
          }

          &.pinterest {
            background: #bd081c;
          }

          &.linkedin {
            background: #0077b5;
          }

          &:hover {
            box-shadow: none !important;
          }

        }

      }

    }

  }

  &:hover {

    .wps-sn-social {
      opacity: 1;
      visibility: visible;
      z-index:2500;
    }

    .wps-sn-overlay {
      opacity: 1;
      visibility: visible;
      z-index: 1000;
    }

  }

}