title: Border hover effect with CSS
body: <p>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.</p>
  
  <p>This is the page example with the content that I want to replicate with css (I want to replicate the border effect):</p>
  
  <p><a href="http://77.238.26.244:81/confimi/pagina-di-test/" rel="nofollow noreferrer">http://77.238.26.244:81/confimi/pagina-di-test/</a></p>
  
  <p>This is the homepage where I tried to replicate the css: </p>
  
  <p><a href="http://77.238.26.244:81/confimi/" rel="nofollow noreferrer">http://77.238.26.244:81/confimi/</a></p>
  
  <p>In the first row there is the "example" and in the row below there is my attempt</p>
  
  <p>This is the code that I made:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background"&gt;
    &lt;div class="layer"&gt;
      &lt;div class="div-diviso"&gt;
        &lt;img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg"&gt;
        &lt;div class="overlay"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="div-diviso"&gt;
        &lt;img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg"&gt;
        &lt;div class="overlay"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="div-diviso"&gt;
        &lt;img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg"&gt;
        &lt;div class="overlay"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="div-diviso"&gt;
        &lt;img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg"&gt;
        &lt;div class="overlay"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="div-diviso"&gt;
        &lt;img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg"&gt;
        &lt;div class="overlay"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/dvi&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>