hover效果

图片hover效果（边框显示&消失

by yu lemon

HTML

<div class="main">
    <div class="border"></div>
</div>

CSS

.main {
            display: inline-block;
            background-color: gray;
            width: 250px;
            height: 250px;
            margin: 0 auto;
            position: relative;
        }
        .border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .border:before {
            position: absolute;
            top: 30px;
            right: 30px;
            bottom: 30px;
            left: 30px;
            content: '';
            border-top: 1px solid red;
            border-bottom: 1px solid red;
            transform: scale(0,1);
            transition: opacity 0.35s, transform 0.35s
        }
        .border:after {
            position: absolute;
            top: 30px;
            right: 30px;
            bottom: 30px;
            left: 30px;
            content: '';
            border-left: 1px solid red;
            border-right: 1px solid red;
            transform: scale(1,0);
            transition: opacity 0.35s, transform 0.35s
        }
        .main:hover .border:before ,  .main:hover .border:after{
            transform: scale(1);
        }