css 鼠标经过图片效果

1.伪类边框线

            <div class="dxd_border">
                <img src="" alt="">
            </div>

 

.dxd_border{
    position: relative;
    overflow: hidden;
}
.dxd_border::before,
.dxd_border::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    transition: all 0.4s ease-out 0s;
     visibility: hidden;
}

.dxd_border::before {
    left: 0;
    top: 0;
    border-top: 2px solid #445e9f;
    border-left: 2px solid #445e9f;
}

.dxd_border:after {
    right: 0;
    bottom: 0;
    border-right: 2px solid #445e9f;
    border-bottom: 2px solid #445e9f;
}

.dxd_border:hover::before,
.dxd_border:hover::after {
    width: 100%;
    height: 100%;
    visibility: visible;   
}

 

 (2).伪类边框

dxd::after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0;
    right: 0;
    border: 0px solid rgba(255, 255, 255, 0.4);
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
}

dxd:hover:after {
    border-width: 20px;
}