gallery的hover事件效果

1..gallery-grid:hover img {

   opacity:8;

   transition: all 300ms!important;

  -webkit-filter: grayscale(100%);

  -webkit-transition: all 300ms!important;

  -moz-transition: all 300ms!important;

  filter:grayscale(100%);

}

鼠标划过时图片颜色为灰色

2.figure.effect-bubba:hover img {

    opacity: 0.3;

}

鼠标划过时图片透明度改变

3..coopde:hover .coop-img{

    transform:rotateY(360deg);

    -webkit-transform:rotateY(360deg);  

    -o-transform:rotateY(360deg);

    -ms-transform:rotateY(360deg);

    -moz-transform:rotateY(360deg);

    transition: 0.5s all ease;

    -webkit-transition: 0.5s all ease;

    -moz-transition: 0.5s all ease;

    -o-transition: 0.5s all ease;

    -ms-transition: 0.5s all ease;
}

鼠标划过时图片水平3D旋转

4.#fh5co-work .fh5co-project-item:hover, #fh5co-work .fh5co-project-item:focus {

   -webkit-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
   -ms-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
   -o-box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
   box-shadow: 7px 14px 42px 3px rgba(0, 0, 0, 0.4);
   text-decoration: none;
   top: -15px;
}

鼠标滑过时 图片向上移动15个像素，并且出现阴影

5.#fh5co-work {
    background-color: #52d3aa;
    background-image: -webkit-repeating-linear-gradient(top left, #3f95ea 0%, #52d3aa 100%);
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    position: relative;
 }
背景颜色渐变色