Добрый день. Надеюсь на подсказку, т.к. не могу понять, в чем проблема. Суть: использую один из hover эффектов с этого источника: https://miketricking.github.io/dist/
Проблема заключается в том, что, в адаптиве, когда картинки становятся в 2 или 1 колонку, пропадает hover эффект.
Сайт, на котором проблема - http://devkeyz.crabdance.com , раздел "Наши работы"
html Ремонт платформы
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="img/work3.png" alt="">
<div class="overlay">
<span>Установка гидроцилинрда</span>
<p>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="img/work4.png" alt="">
<div class="overlay">
<span>Установка системы BDF</span>
<p>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="img/work1.png" alt="">
<div class="overlay">
<span>Ремонт платформы</span>
<p>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="img/work2.png" alt="">
<div class="overlay">
<span>Ремонт платформы</span>
<p>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="img/work3.png" alt="">
<div class="overlay">
<span>Ремонт платформы</span>
<p>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="img/work4.png" alt="">
<div class="overlay">
<span>Ремонт платформы</span>
<p>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.
</p>
</div>
</div>
</div>
SASS
.portfolio-item
margin: 15px 0px
.hovereffect
width: 100%
height: auto
overflow: hidden
position: relative
text-align: center
cursor: default
float: left
.overlay
position: absolute
overflow: hidden
width: 80%
height: 80%
left: 10%
top: 10%
border-bottom: 1px solid #FFF
border-top: 1px solid #FFF
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s
transition: opacity 0.35s, transform 0.35s
-webkit-transform: scale(0,1)
-ms-transform: scale(0,1)
transform: scale(0,1)
&:hover .overlay
opacity: 1
filter: alpha(opacity=100)
-webkit-transform: scale(1)
-ms-transform: scale(1)
transform: scale(1)
img
display: block
position: relative
-webkit-transition: all 0.35s
transition: all 0.35s
&:hover img
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter')
filter: brightness(0.3)
-webkit-filter: brightness(0.3)
transition: 0.3s
span
text-transform: uppercase
font-weight: bold
text-align: center
position: relative
font-size: 17px
background-color: transparent
color: #FFF
padding: 1em 0
opacity: 0
filter: alpha(opacity=0)
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s
transition: opacity 0.35s, transform 0.35s
-webkit-transform: translate3d(0,-100%,0)
transform: translate3d(0,-100%,0)
p
color: #FFF
opacity: 0
filter: alpha(opacity=0)
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s
transition: opacity 0.35s, transform 0.35s
-webkit-transform: translate3d(0,100%,0)
transform: translate3d(0,100%,0)
&:hover p, :hover span
opacity: 1
filter: alpha(opacity=100)
-webkit-transform: translate3d(0,0,0)
transform: translate3d(0,0,0)