Hiệu ứng hover ảnh

 

**** HTML:

<div class="pdnews-pic">

    <img src="anh.jpg">

</div>

**** CSS:

.pdnews-pic {

    width: 100%;

    height: 260px;

    overflow: hidden;

    position: relative;

}

.pdnews-pic::before {

    content: "";

    position: absolute;

    top: 25px;

    bottom: 25px;

    left: 50%;

    right: 50%;

    border-top: solid 1px #ffffff;

    border-bottom: solid 1px #ffffff;

    -webkit-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    pointer-events: none;

    z-index: 1;

}

.pdnews-pic::after {

    content: "";

    position: absolute;

    left: 20px;

    right: 20px;

    top: 50%;

    bottom: 50%;

    border-left: solid 1px #ffffff;

    border-right: solid 1px #ffffff;

    -webkit-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    pointer-events: none;

    z-index: 1;

}

.pdnews-pic:hover::before {

    left: 15px;

    right: 15px;

}

.pdnews-pic:hover::after {

    top: 20px;

    bottom: 20px;

}