티스토리 뷰



마우스 오버를 하면 필요한 소셜버튼이 나오는 효과입니다.
크게 어려운 부분은 없는 것 같네요^^

figure .contact .tw {
    top: 0; left: 0;
    background-color: rgba(0, 172, 238, .7);
    background-position: 30px 32px;
    transform: translate(-100%, -100%);
  }
    figure .contact .tw:hover {
      background-color: rgba(0, 172, 238, 1);
    }
  figure .contact .fb {
    top: 0; right: 0;
    background-color: rgba(59, 89, 152, .7);
    background-position: -42px 32px;
    transform: translate(100%, -100%);
  }
    figure .contact .fb:hover {
      background-color: rgba(59, 89, 152, 1);
    }
  figure .contact .gp {
    bottom: 0; left: 0;
    background-color: rgba(221, 75, 57, .7);
    background-position: 30px -40px;
    transform: translate(-100%, 100%);
  }
    figure .contact .gp:hover {
      background-color: rgba(221, 75, 57, 1);
    }
  figure .contact .ma {
    bottom: 0; right: 0;
    background-color: rgba(153, 153, 153, .7);
    background-position: -42px -40px;
    transform: translate(100%, 100%);
  }
    figure .contact .ma:hover {
      background-color: rgba(153, 153, 153, 1);
    }
    figure:hover .contact a {
      transform: translate(0, 0);
    }


See the Pen Hexagonal Team Members by Yusuf (@yy) on CodePen.









댓글
댓글쓰기 폼