.wrapper-images:before,
.wrapper-images:after{
  content: "";
  clear: both;
  display: block;
}
.wrapper-images{
  max-width: 1920px;
  margin: 0 auto;
}

.wrapper-images .item-image{
  width: 25%;
  float: left;
  position: relative;
}
.wrapper-images .item-image img{
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 390px;
}
.wrapper-images .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: .8;
  transition: .5s ease;
  background-color: #055ea2;
}
.wrapper-images .border{
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 90%;
  width: 90%;
  border: 5px solid #055ea2;
  transform: translate(-50%,-50%);
}
.wrapper-images .item-image:hover .overlay{opacity: 0;}
.wrapper-images .item-image:hover .border{opacity: 1;}
@media (max-width:767px){
  .wrapper-images .item-image{
    width: 50%;
  }
}