I do something similar to Masonry, without JS. An example here-> bootply.com/1Tq35rlkbx The code is identical, put a hoover effect, and when scaled, the first photo works fine, and subsequent ones disappear, although they are transformed. 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>

The second photo disappears when the hooker is, why is it like that (even removing overflow: hidden, the photo remains, only for some reason it flashes) ??? P.S. You can check for the same link, take CSS and HTML from here, work out the same way, all the next photo, disappear ...

1 answer 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>

In general, your business is not in 18 em, but in error, some kind of block was not closed during layout, and it is not in column ..., in general, you can correct as you like