Border Hover-Effekt mit CSS

Question

Ich habe versucht, einen Rand Hover-Effekt zu replizieren, aber ich habe nicht verstanden, warum ich :: vor und :: nach diesem CSS-Effekt verwenden muss.

Dies ist die Seite Beispiel mit dem Inhalt, dass ich mit CSS replizieren will (ich will die Grenze Effekt replizieren):

http://77.238.26.244:81/confimi/pagina-di-test/

Dies ist die Homepage, wo ich die CSS zu replizieren versucht:

http://77.238.26.244:81/confimi/

in der ersten Zeile gibt es das „Beispiel“ und in der Zeile unter es ist mein Versuch

Dies ist der Code, den ich gemacht:

round { 
 
    background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    height: 100%; 
 
} 
 
.layer { 
 
    background-color: rgba(18, 29, 47, 0.96); 
 
    background-repeat: repeat; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    padding: 200px 20px 200px 20px; 
 
} 
 
.div-diviso { 
 
    width: 17%; 
 
    margin: 10px; 
 
    display: inline-block; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 
.div-diviso img { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.div-diviso .overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    opacity: 0; 
 
    transform: scale(0.1); 
 
    -webkit-transform: scale(0.1); 
 
    -moz-transform: scale(0.1); 
 
    -ms-transform: scale(0.1); 
 
    -o-transform: scale(0.1); 
 
    transition: all 0.5s ease-in-out; 
 
    -webkit-transition: all 0.5s ease-in-out; 
 
    -o-transition: all 0.5s ease-in-out; 
 
    visibility: hidden; 
 
} 
 
.div-diviso:hover .overlay { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    -webkit-transform: scale(1); 
 
    -moz-transform: scale(1); 
 
    -ms-transform: scale(1); 
 
    -o-transform: scale(1); 
 
    visibility: visible; 
 
    border: 3px solid #ffffff; 
 
    transform: border scale3d(0, 1, 1); 
 
} 
 
@media (min-width: 768px) and (max-width: 980px) { 
 
    .layer { 
 
    text-align: center; 
 
    } 
 
    .div-diviso { 
 
    width: 47%; 
 
    margin: 10px; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .layer { 
 
    text-align: center; 
 
    } 
 
    .div-diviso { 
 
    width: 98%; 
 
    margin: 5px; 
 
    } 
 
}

<div class="background"> 
 
    <div class="layer"> 
 
    <div class="div-diviso"> 
 
     <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg"> 
 
     <div class="overlay"> 
 
     </div> 
 
    </div> 
 
    <div class="div-diviso"> 
 
     <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg"> 
 
     <div class="overlay"> 
 
     </div> 
 
    </div> 
 
    <div class="div-diviso"> 
 
     <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg"> 
 
     <div class="overlay"> 
 
     </div> 
 
    </div> 
 
    <div class="div-diviso"> 
 
     <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg"> 
 
     <div class="overlay"> 
 
     </div> 
 
    </div> 
 
    <div class="div-diviso"> 
 
     <img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg"> 
 
     <div class="overlay"> 
 
     </div> 
 
    </div> 
 
    </dvi> 
 
    </div>

Answer 1

Sie nicht Grenzen von der Mitte nativ in CSS animieren können. Sie werden automatisch vom Startpunkt der div (oder vom entgegengesetzten Ende, wenn Sie eine transform: rotate(180deg) verwenden möchten). Daher die Verwendung der Elemente.

Außerdem ist transform: border scale3d(0, 1, 1); ungültig, da keine CSS3-Eigenschaft ist, die auf transform anwendbar ist.

Wenn Sie die Pseudo-Elemente nicht verwenden möchten, können Sie ein spätes Aussehen des Rahmens auf dem Overlay verwenden. Es wird jedoch nicht aus der Mitte animieren.

Ändern Sie bitte Ihre CSS als:

.div-diviso:hover .overlay { 
    opacity: 1; 
    transform: scale(1); 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    visibility: visible; 
    border: 3px solid #ffffff; 
    transition: border 0.75s; 
} 

EDIT

Wenn Sie die Pseudo-Selektoren verwenden wollen, wenden Sie das folgende CSS:

.div-diviso:hover .overlay:before, .div-diviso:hover .overlay:after { 
    height: 100%; 
    top: 0; 
    width: 100%; 
    left: 0; 
    -webkit-transition-delay: 0.2s; 
    transition-delay: 0.2s; 
} 

.div-diviso .overlay:before, .div-diviso .overlay:after { 
    content: ''; 
    -webkit-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    z-index: 9; 
} 

.div-diviso .overlay:after { 
    content: ''; 
    width: 0; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    border-top: 3px solid #20bed0; 
    border-bottom: 3px solid #20bed0; 
} 

.div-diviso .overlay:before { 
    width: 100%; 
    height: 0; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    border-left: 3px solid #20bed0; 
    border-right: 3px solid #20bed0; 
}