Как достичь этого конкретного эффекта зависания?

Question

Я пытаюсь реплицировать эффект зависания this, но я даже уверен, с чего начать честно.

Вот мой HTML код:

<div class="row"> 
      <div class="col-sm-4 portfolio-item"> 
      <a href="#" class="thumbnail"> 
       <img src="img/portfolio/cabin.png"> 
      </a> 
      </div> 
      <div class="col-sm-4 portfolio-item"> 
      <a href="#" class="thumbnail"> 
       <img src="img/portfolio/game.png"> 
      </a> 
      </div> 
      <div class="col-sm-4 portfolio-item"> 
      <a href="#" class="thumbnail"> 
       <img src="img/portfolio/circus.png"> 
      </a> 
    </div> 

CSS: (все я)

#portfolio .portfolio-item { 
    background-color: #18BC9C; 
    transition: all ease .5s; 
    -webkit-transition: all ease .5s; 
} 

#portfolio .portfolio-item:hover { 

} 

Я даже не знаю, с чего начать. Я думаю, мне нужно что-то исправить с помощью z-индекса и непрозрачности, но я не знаю, где его настроить, и я также не уверен, где применить эффект перехода. Все, что я пробовал, не сработало, поэтому, если бы кто-нибудь мог показать мне, как добиться эффекта зависания с чистого листа, который был бы весьма признателен.

Answer 1

Вы можете использовать псевдо-элемент ::after для создания наложения. Просто используйте opacity: 0;, чтобы скрыть его, и покажите его при наведении: opacity: 0.6;. В качестве перехода вы можете использовать: transition: opacity ease .5s;.

Таким образом, вы можете создать наложение цвета на каждое изображение (было бы невозможно с использованием только фона на родительском элементе). Чтобы создать увеличительное стекло, вы можете использовать <span> внутри тега <a> или другого псевдоэлемента ::before.

.portfolio-item a { 
 
    position: relative; 
 
} 
 
.portfolio-item a::after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #457647; 
 
    opacity: 0; 
 
    transition: opacity ease .5s; 
 
} 
 
.portfolio-item a:hover::after { 
 
    opacity: 0.6; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-sm-4 portfolio-item"> 
 
    <a href="#" class="thumbnail"> 
 
     <img src="//placehold.it/200x100/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-item"> 
 
    <a href="#" class="thumbnail"> 
 
     <img src="//placehold.it/200x100/fff"> 
 
    </a> 
 
    </div> 
 
    <div class="col-sm-4 portfolio-item"> 
 
    <a href="#" class="thumbnail"> 
 
     <img src="//placehold.it/200x100/fff"> 
 
    </a> 
 
    </div> 
 
</div>

Конечно, вы должны использовать префиксы для старых браузеров. Также убедитесь, что ваша разметка действительна - отсутствовал закрывающий тег div.

Answer 2

В разделе .portfolio-item:hover вы можете установить новые значения для атрибутов, указанных ранее и которые вы хотите преобразовать. если вы например установили background-color: black; портфолио-item станет черным. Также вы можете указать opacity: 1; за portfolio-item и opacity: 0; за portfolio-item:hover. Посмотрите на exaple:

.portfolio-item { 
 
    background-color: #18BC9C; 
 
    opacity: 1; 
 
    transition: all .7s ease ; 
 
    -webkit-transition: all .7s ease ; 
 
} 
 

 
.portfolio-item:hover { 
 
    background-color: #14C; 
 
    opacity: .5; 
 
}

<div class="row"> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="img/portfolio/cabin.png"> 
 
      </a> 
 
      </div> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="img/portfolio/game.png"> 
 
      </a> 
 
      </div> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="img/portfolio/circus.png"> 
 
      </a> 
 
    </div> 
 
    </div>

Answer 3

Привет, это поможет вам начать работу. Сначала создайте непрозрачность наложения 0, а затем напишите немного jQuery, чтобы при наведении класса была применена непрозрачность 1 с rgba (rgb с непрозрачностью) и css-переход.

Смотрите код больше, и работать с этим, если вы хотите, я отделил накладку от изображения, чтобы иметь контроль над ними как:

$(document).ready(function() { 
 
    $('.portfolio-item') 
 
    .mouseover(function() { 
 
    $(this).find('.overlay').addClass('show'); 
 
    }) 
 
    .mouseout(function() { 
 
    $(this).find('.overlay').removeClass('show'); 
 
    }); 
 
});

* { 
 
-webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
box-sizing: border-box; 
 
} 
 

 
.col-sm-4 { 
 
    float: left; 
 
    width: 33%; 
 
    position: relative; 
 
    } 
 

 
img { 
 
width: 100%; 
 
    display: block; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(145,0,0,0.5); 
 
    z-index: 2; 
 
    width: 100%; 
 
    height: auto; 
 
    opacity: 0; 
 
    -webkit-transition: .3s ease-in opacity; 
 
    -moz-transition: .3s ease-in opacity; 
 
    transition: .3s ease-in opacity; 
 
    } 
 

 
.overlay.show { 
 
opacity: 1; 
 
} 
 

 
.overlay.show:after { 
 
    content: 'x'; 
 
    color: white; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="row"> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <div class="overlay"></div> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="http://placehold.it/100x50"> 
 
      </a> 
 
      </div> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <div class="overlay"></div> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="http://placehold.it/100x50"> 
 
      </a> 
 
      </div> 
 
      <div class="col-sm-4 portfolio-item"> 
 
      <div class="overlay"></div> 
 
      <a href="#" class="thumbnail"> 
 
       <img src="http://placehold.it/100x50"> 
 
      </a> 
 
    </div>