백그라운드 그라디언트, 마우스 오버시 질문입니다. 채택완료

 

.s3_card_navbox{

  width: 25%;

  height: 160px;

  padding: 0 30px;

  background: #fff;

  background: -moz-linear-gradient(45deg, #fff 0%, #fff 100%); /* FF3.6-15 */

  background: -webkit-linear-gradient(45deg, #fff 0%,#fff 100%); /* Chrome10-25,Safari5.1-6 */

  background: -o-linear-gradient(45deg, #fff 0%,#fff 100%);

  background: linear-gradient(45deg, #fff 0%,#fff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  -webkit-box-shadow: 0px 0px 10px rgba(51, 60, 64, 0.58);

  -moz-box-shadow:    0px 0px 10px rgba(51, 60, 64, 0.58);

  -o-box-shadow:    0px 0px 10px rgba(51, 60, 64, 0.58);

  box-shadow:         0px 0px 10px rgba(51, 60, 64, 0.58);

  position: relative;

  float: left;

  z-index: 2;

  top: 110px;

  transform: translateY(-50%);

  left: 25px;

  transition: all 0.5s;

  /* background-position-x: 0%;

  background-position-y: 0%; */

}

.s3_card_navbox:hover{

  background: #89f7fe; /* Old browsers */

  background: -moz-linear-gradient(45deg, #89f7fe 0%, #66a6ff 100%); /* FF3.6-15 */

  background: -webkit-linear-gradient(45deg, #89f7fe 0%,#66a6ff 100%); /* Chrome10-25,Safari5.1-6 */

  background: -o-linear-gradient(45deg, #89f7fe 0%,#66a6ff 100%);

  background: linear-gradient(45deg, #89f7fe 0%,#66a6ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89f7fe', endColorstr='#66a6ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  

 }

 



    $(function(){

        $(".s3_card_navbox").mouseover(function(){

            $(this).animate({

                'background-position-x': '100%',

                'background-position-y': '20%'

            },500,'linear');

        });

    });