Border hover effect with CSS - css

Question

I tried to replicate a border hover effect but I didn't understand why I need to use ::before and ::after to do this Css effect.
This is the page example with the content that I want to replicate with css (I want to replicate the border effect):
http://77.238.26.244:81/confimi/pagina-di-test/
This is the homepage where I tried to replicate the css:
http://77.238.26.244:81/confimi/
In the first row there is the "example" and in the row below there is my attempt
This is the code that I made:
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

You cannot animate borders from the middle natively in css. They will auto transition from the starting point of the div (or from the opposite end if you want to use a transform: rotate(180deg)). Hence, the usage of the ::before & ::after elements.
Also, transform: border scale3d(0, 1, 1); is invalid as border is not a CSS3 property applicable to transform.
If you do not want to use the pseudo elements, then you can use a late appearance of the border on the overlay. However it won't animate from the middle.
Modify your css as:
.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
If you do want to use the pseudo selectors, apply the following 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;
}