css :after鼠标滑过样式

html

<div id="more" class="ant-row icon-item-list">
        <div class="ant-col ant-col-6 icon-effect-1 icon-effect-1a icon-item" style="text-align: center;">
            <div class="icon-item-box"><span aria-hidden="true" class="fa fa-city icon" style="color: brown;"><img class="luo_nav_img"  src="https://static.98ep.com/Img/fulishopmall/landPage_nav1.png" alt=""></span>
                <p>阳光企采</p>
            </div>
        </div>
        <div class="ant-col ant-col-6 icon-effect-1 icon-effect-1a icon-item" style="text-align: center;">
                <div class="icon-item-box"><span aria-hidden="true" class="fa fa-lock icon" style="color: brown;"><img class="luo_nav_img"  src="https://static.98ep.com/Img/fulishopmall/landPage_nav2.png" alt=""></span>
                    <p>阳光福利商城</p>
                </div>
            </div>
            <div class="ant-col ant-col-6 icon-effect-1 icon-effect-1a icon-item" style="text-align: center;">
                    <div class="icon-item-box"><span aria-hidden="true" class="fa fa-lock icon" style="color: brown;"><img class="luo_nav_img"  src="https://static.98ep.com/Img/fulishopmall/landPage_nav3.png" alt=""></span>
                        <p>阳光福利管理平台</p>
                    </div>
                </div>
    </div>

css

.icon-item-list {
    width:750px;
    background:hsla(0,0%,98%,.15);
    border-radius:10px;
    margin:70px auto 0
}
.icon-item {
    width:200px;
    height: 200px;
    display:inline-block;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    background:transparent;
    margin-right:70px;
    padding:0!important;
    text-align:center;
    float:none!important
}
.icon-item:last-child{
    margin-right: 0;
}
.icon-item .icon-item-box {
    background:#fff;
    height:100%;
    width:100%;
    -webkit-box-shadow:0 0 2px 1px rgba(0,0,0,.07);
    box-shadow:0 0 2px 1px rgba(0,0,0,.07);
    border:1px solid hsla(0,0%,80%,.1);
    border-radius:5px;
    position:relative
}
.icon-item .icon-item-box,.icon-item .icon-item-box p {
    transition:all .7s ease-in-out;
    -moz-transition:all .7s ease-in-out;
    -webkit-transition:all .7s ease-in-out;
    -o-transition:all .7s ease-in-out
}
.icon-item .icon-item-box p {
    color:#293c55;
    position:absolute;
    bottom:30px;
    width:100%
}
.icon-item:hover .icon-item-box {
    background:#293c55;
    cursor:pointer
}
.icon-item:hover .icon-item-box p {
    color:#f3f3f3
}
.icon-item:hover .icon {
    background:#f3f3f3;
    color:#293c55!important;
    border:1px solid #f3f3f3;
    -webkit-transform:rotate(180deg) scale(.75);
    transform:rotate(180deg) scale(.75)
}
.icon-item:hover .icon:after {
    -webkit-box-shadow:0 0 0 2px #f3f3f3;
    box-shadow:0 0 0 2px #f3f3f3
}
.icon {
    position:relative;
    font-size:40px;
    cursor:pointer;
    margin:40px 0 0;
    width:80px;
    height:80px;
    line-height:80px;
    border-radius:50%;
    z-index:2;
    color:#fff;
    display:inline-block;
    color:rgba(41,60,85,.9)!important;
    border:1px solid rgba(41,60,85,.5);
    -webkit-transform:rotate(0deg) scale(1);
    transform:rotate(0deg) scale(1)
}
.icon,.icon:after {
    transition:all .7s ease-in-out;
    -moz-transition:all .7s ease-in-out;
    -webkit-transition:all .7s ease-in-out;
    -o-transition:all .7s ease-in-out
}
.icon:after {
    position:absolute;
    pointer-events:none;
    width:120%;
    height:120%;
    border-radius:50%;
    content:"";
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    top:-8px;
    left:-8px
}
.luo_nav_img{
    position: absolute;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}