html

<div class="logic_item_box icon-box">
                            <!-- icon-box-img中放背景图，可以放Img 图片，建议img 图片 -->
                            <p class="logic_img logic_img_01 icon-box-img"></p>
                            <p class="logic_title">Untangling wicked digital problems</p>
                            <p class="logic_desc">All the rumors have finally died down and many skeptics have tightened
                                their lips, the iPod does support video format…</p>
                            <p class="logic_btn">Read More</p>
                            <p class="icon-img-hover">

								<a href="" class="icon-a icon thumbs "><i class="fa fa-thumbs-o-up"></i></a>

								<a href="" class="icon-a"><i class="fa fa-star-o"></i></a>

								<a href="" class="icon-a"><i class="fa  fa-shopping-cart"></i></a>

							</p>
                        </div>

csss

  
    /* hover盒子的任意部分--整个盒子变背景色 */
    /* .icon-box {
        -webkit-transition: opacity 0.45s;
        transition: opacity 0.45s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .icon-box:hover{
        opacity: 0.6;
    } */

    /* 只是hover盒子中的图片，图片部门变背景色 */
    .icon-box-img{
        /* 图片hover 时候放大 */
        transition: opacity 1s, transform 1s; 
          /* 图片hover 加上蒙层 */
        /* -webkit-transition: opacity 0.45s;
        transition: opacity 0.45s; */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .icon-box-img:hover{
        /* 图片hover 加上蒙层 */
        opacity: 0.6;
        /* 图片hover 时候放大 */
        transform: scale3d(1.1,1.1,1);
    }
    .icon-img-hover{
        position: absolute;
        z-index: 4;
        text-align: center;
        left: 29%;
        top: 27%;
    }
    .icon-a{
        background: white;
        display: inline-block;
        text-align: center;
        color: #474747;
        margin: 0 10px;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        line-height: 36px;
     
    }
    .icon-a:hover{
        background-color: #f53e6a;
        color: white;
    }

    .icon-box .icon-img-hover .icon-a{
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,50px,0);
        transform: translate3d(0,50px,0);
    }
    .icon-box:hover .icon-a{
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
    /* 注意：我这里只有三个Icon，所以值只设置了三个Icon的动画延迟，多个一次设置动画延迟 */
    .icon-box:hover .icon-a:first-child{
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }

    .icon-box:hover .icon-a:nth-child(2){
        -webkit-transition-delay: 0.1s;
	    transition-delay: 0.1s;
    }
    .icon-box:hover .icon-a:nth-child(3){
        -webkit-transition-delay: 0.05s;
	    transition-delay: 0.05s;
    }

效果

i

css hover 图片依次延迟出现图标