Как реализовать эффект затемнения изображения с двумя кнопками?

#html #jquery #css

Уважаемые профи!
Прошу помощи в реализации следующего эффекта.



Смог сделать всё, кроме работающих кнопок "лупа" и "ссылка".

Мой фрагмент кода:


$('.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');
});
.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;
}


  

    
      
    
    

      
    
  
  

    
Claritas Etiam Processus
    Photography, Nature
  


  

    
      
    
    

      
    
  
  

    
Quam Nutamus Farum
    Graphic Design, Mock-Up
  


  

    
      
    
    

      
    
  
  

    
Usus Legentis Videntur
    Photography, Holiday
  





Заранее всем спасибо!
    

Ответы

Ответ 1

Не по вашему примеру сделал но показал механизм как такое реализуется

Создаём блок в котором находится всё то что надо скрыть и  показываем при событии hover 



* {
  margin: 0;
  padding: 0;
}

.items {
  display: inline-block;
  text-align: center;
  position: relative;
  width: 220px;
  height: 220px;
  overflow: hidden;
}

.post_hidden {
  text-align: left;
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
  padding: 20px;
  background: #222;
  transition: 0.34s linear;
}

.post_hidden h3 {
  font-size: 18px;
  color: #fbfbfb;
}

.post_hidden p {
  font-size: 12px;
  color: #fbfbfb;
}

.post_hidden p {
  width: 200px;
}

.preview {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}

.wrapper {
  position: relative;
  width: 220px;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.34s linear;
}

.item {
  height: 120px;
  line-height: 140px;
}

.item a {
  margin: 0 10px;
  color: #fbfbfb;
}

.items:hover .wrapper {
  opacity: 1;
  visibility: visible;
}

.items:hover .post_hidden {
  transform: translateY(0);
}



  

    
  
  

    

      
      
    
    

      
post name
      
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet, eaque?