Hover box effect

<div class="box">

  <h2>Title</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet, ipsum nec interdum tempus, purus lorem lacinia odio, eget efficitur tellus odio nec nibh</p>

</div>

<div class="box">

  <h2>Title</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet, ipsum nec interdum tempus, purus lorem lacinia odio, eget efficitur tellus odio nec nibh</p>

</div>

<div class="box">

  <h2>Title</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet, ipsum nec interdum tempus, purus lorem lacinia odio, eget efficitur tellus odio nec nibh</p>

</div>

<div class="box">

  <h2>Title</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet, ipsum nec interdum tempus, purus lorem lacinia odio, eget efficitur tellus odio nec nibh</p>

</div>

<div class="box">

  <h2>Title</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet, ipsum nec interdum tempus, purus lorem lacinia odio, eget efficitur tellus odio nec nibh</p>

</div>

<div class="box">

  <h2>Title</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet, ipsum nec interdum tempus, purus lorem lacinia odio, eget efficitur tellus odio nec nibh</p>

</div>

.box {

  display:inline-block;

  width:13em;

  margin:2em auto;

  background-color:#e6ebef;

  position:relative;

  color:#527fa8;

  text-align:center;

  padding:1em;

  margin:1em;

  cursor:pointer;

}

.box:after,

.box:before{

    bottom: 0;

    content: "";

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

    transition: all 0.5s ease 0s;

}

.box:before {

      border-right: 2px solid #527fa8;

    border-left: 2px solid #527fa8;

        transform: scaley(0);

    transform-origin: 100% 0 0;

}

.box:after {

      border-top: 2px solid #527fa8;

    border-bottom: 2px solid #527fa8;

        transform: scaleX(0);

    transform-origin: 0 100% 0;

}

.box:hover:after,

.box:hover:before {

  transform: scaleY(1);

  transform: scaleX(1);

}

p {

font-size:0.9em;

}

h2 {

  margin:0.2em 0;

}