.better-img-01 {
    position: relative;
}

.better-img-01:before {
    position: absolute;
    content: '';
    height: 90%;
    width: 90%;
    background: transparent;
    border: 2px solid #fff;
    left: -30px;
    top: -30px;
    transition: 0.5s ease;
}

.better-img-01:hover:before {
    position: absolute;
    content: '';
    height: 90%;
    width: 90%;
    background: transparent;
    border: 2px solid #fff;
    left: 80px;
    top: 90px;
    transition: 0.5s ease;opacity:0.3;
}

@media (max-width: 767px){
 .better-img-01:hover:before {
    left: -30px;
    top: -30px;
}}

/**************************************************************/
.better-img-02 {position: relative;}.better-img-02:before {position: absolute;z-index:-1;content: '';height: 90%;width: 90%;background: transparent;border: 2px solid #3f4537;left: -30px;top: -30px;transition: 0.5s ease;}.better-img-02:hover:before {position: absolute;content: '';height: 90%;width: 90%;background: transparent;border: 2px solid #3f4537;left: 80px;top: 90px;transition: 0.5s ease;opacity:0.3;}

@media (max-width: 767px){
 .better-img-02:hover:before {
    left: -30px;
    top: -30px;
}}


/**************************************************************/
.better-img-03 {position: relative;}
.better-img-03:before {position: absolute;z-index:-1;content: '';height: 90%;width: 90%;background: transparent;border: 2px solid #3f4537;right: -30px;top: -30px;transition: 0.5s ease;}
.better-img-03:hover:before {position: absolute;content: '';height: 90%;width: 90%;background: transparent;border: 2px solid #3f4537;right: 80px;top: 90px;transition: 0.5s ease;opacity:0.3;}

@media (max-width: 767px){
 .better-img-03:hover:before {
    right: -30px;
    top: -30px;
}}