I have some thumbnails in a grid, that are all of the same size, but when you hover one it grows in height.
What I would like is that my block grows, and the other under it go down. But what actually happens is the grid reorganizes everything dynamically each time.
Here is a gif showing what happens:
Instead of that, I would like for only the column hovered to move down, and not have items switching columns.
The markup is like that:
<!-- This happens in a loop for each item -->
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6 item-container">
<!-- Content of the box -->
<div class="ratio" style="background-image:url('image.jpg')"></div>
<div class="item-title alphaband">
<span> Title </h2>
<div class="item-desc alphaband">
<span> 2014-05-11 </span>
<div class="category-icon category category-band">
<span> Category </span>
You need to nest another row inside of each column. Then any resizing happens within the column itself on mouse over rather then across all blocks in the same row.
Something like this:
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-6 item-container"> <div class="row"> <div class="col-md-12 item"> <img src="//placehold.it/200x150/992233"> </div> <div class="col-md-12 item"> <img src="//placehold.it/200x150/449955/FFF"> </div> </div> </div>
Bootply example: http://www.bootply.com/Ih5cdXzn2B