與CSS的邊框懸停效果

Question

我試圖複製邊框懸停效果，但我不明白爲什麼我需要使用:: before和:: after來做這個Css效果。

這是與內容頁面的例子，我想用CSS複製（我要複製的邊界效應）：

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

這是我試圖複製的CSS網頁：

http://77.238.26.244:81/confimi/

在第一行有「榜樣」和下面的行中有我嘗試

這是我做的代碼：

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

不能從中間原生支持CSS動畫的邊界。他們將自動從div（或者如果您想要使用transform: rotate(180deg)時從另一端）的起點過渡。因此，使用::before & ::after元素。

另外，transform: border scale3d(0, 1, 1);無效，因爲border不是適用於transform的CSS3屬性。

如果您不想使用僞元素，那麼您可以在疊加層上使用較晚的邊界外觀。但它不會從中間起動。

修改CSS爲：

.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; 
} 

編輯

如果你想使用僞選擇，應用以下的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; 
}