Делаю что то похожее на Masonry, без JS. Пример тут-> bootply.com/1Tq35rlkbx Код идентичный, наложил хувер еффект, и при масштабировании, первое фото отрабатывает нормально, а последующие, исчезают, хотя и трансформируются. HTML
#grid {
column-width:18em;
-webkit-column-width: 18em;
column-gap:1em;
-webkit-column-gap:1em;
}
.grid-item {
display: inline-block;
padding: 0.8rem;
width: 100%;
word-wrap:break-word;
}
.well {
position:relative;
display: block;
}
.col-item{
border-radius: 5px;
}
.col-item:hover {
cursor:pointer;
}
.col-item .photo{
overflow:hidden;
}
.col-item .photo:not(:hover) img{
transition:.5s;
}
.col-item .photo:hover img{
-webkit-transform:scale(1.3);
transform:scale(1.3);
transition:.5s;
}
.col-item .photo img
{
margin: 0 auto;
width: 100%;
}
<div class="container">
<div id="grid" class="row">
<!-- GRID ITEM -->
<div class="grid-item">
<div class="well">
<div class="col-item">
<div class="photo">
<img src="http://arthasmenethil.com/6.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
</div>
<!-- GRID ITEM -->
<div class="grid-item">
<div class="well">
<div class="col-item">
<div class="photo">
<img src="http://arthasmenethil.com/6.jpg" class="img-responsive" alt="a" />
</div>
</div>
</div>
</div>
</div>
</div>
Второе фото исчезает при хувер, почему так (даже убрав overflow:hidden, фото остается, только почему - то мегает )??? П.С. Проверить можно по той же ссылке, взять CSS и HTML отсюда, отрабатывает так же, все следующий фото, исчезают...