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