<div class="col-4 projects-post webdesign justify-content-center mb-4">
 <div class="projects-post-img text-center p-2 w-100">
 <a href="img/projects/photo1.jpg">
 <img class="w-100 h-100" src="img/projects/photo-1.jpg" alt="" />
 </a>
 <div class="projects-post__arrow">
 <img src="img/projects/arrow.png" alt="">
 </div>
 </div>
 <div class="projects-post-text pl-4">
 <h5 class="projects-post-text__title">Claritas Etiam Processus</h5>
 <small class="projects-post-text__subtitle">Photography, Nature</small>
 </div>
 </div>
 <div class="col-4 projects-post webdesign justify-content-center mb-4">
 <div class="projects-post-img text-center p-2 w-100">
 <a href="img/projects/photo2.jpg">
 <img class="w-100 h-100" src="img/projects/photo-2.jpg" alt="" />
 </a>
 <div class="projects-post__arrow">
 <img src="img/projects/arrow.png" alt="">
 </div>
 </div>
 <div class="projects-post-text pl-4">
 <h5 class="projects-post-text__title">Quam Nutamus Farum</h5>
 <small class="projects-post-text__subtitle">Graphic Design, Mock-Up</small>
 </div>
 </div>
 <div class="col-4 projects-post mobile justify-content-center mb-4">
 <div class="projects-post-img text-center p-2 w-100">
 <a href="img/projects/photo3.jpg">
 <img class="w-100 h-100" src="img/projects/photo-3.jpg" alt="">
 </a>
 <div class="projects-post__arrow">
 <img src="img/projects/arrow.png" alt="">
 </div>
 </div>
 <div class="projects-post-text pl-4">
 <h5 class="projects-post-text__title">Usus Legentis Videntur</h5>
 <small class="projects-post-text__subtitle">Photography, Holiday</small>
 </div>
 </div>

.projects-post {
  background-color: #fbfaf8;
}

.projects-post-img {
  position: relative;
  text-align: center;
}

.projects-post-img a {
  display: block;
  position: relative;
}

.projects-post-img a:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.projects-post-img a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../img/projects/lupa.png") center no-repeat;
  opacity: 0;
  z-index: 10;
}

.projects-post-img a:hover:before,
.projects-post-img a:hover:after {
  opacity: 1;
}

.projects-post__arrow {
  position: absolute;
  bottom: 3px;
  left: 30px;
}

.projects-post-text {
  padding-top: 20px;
  padding-bottom: 15px;
}

.projects-post-text__title {
  color: #c7b299;
  font-family: 'Raleway';
  font-size: 18px;
  font-weight: 500;
}

.projects-post-text__subtitle {
  color: #d1d1d1;
  font-family: 'Montserrat';
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

$('.projects-post').mouseenter(function(){
    $(this).find('.projects-post__arrow>img').attr('src','../img/projects/arrow-activ.png');
    $(this).find('.projects-post-img').css('background-color','#362f2d');
    $(this).find('.projects-post-text').css('background-color','#362f2d');
});
$('.projects-post').mouseleave(function(){
    $(this).find('.projects-post__arrow>img').attr('src','../img/projects/arrow.png');
    $(this).find('.projects-post-img').css('background-color','#fbfaf8');
    $(this).find('.projects-post-text').css('background-color','#fbfaf8');
});