1

Делаю что то похожее на 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 отсюда, отрабатывает так же, все следующий фото, исчезают...

1

1 ответ 1

1

*{
  margin:0;
  padding:0;
}
#grid{
  width:240px;
  height:150px;
  margin:2px;
  overflow:hidden;
  float:left;
}
.photo{
 width:240px;
}
.photo img{
  width:240px;
  transition:.5s;
}
.photo:hover img{
  transform:scale(1.3);
}
section{
  margin:10px;
  padding:1px;
  background:lightblue;
  display:block;
  clear:both;
  overflow:hidden;
}
section:after{
  content:'';
  display:block;
  clear:both;
}
<section>
<!--1 block-->
   <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>
  </div>
<!--end 1 block-->
<!--2 block-->
   <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>
  </div>
<!--end 2 block-->
<!--3 block-->
    <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>
  </div>
<!--end 3 block-->
</section>

В общем дело у вас не в 18 em а в ошибке , при вёрстке не был закрыт какой то блок , и дело не в column... , в общем можете исправлять как вам угодно

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.