Beniamino_Baggins Beniamino_Baggins - 6 months ago 49
HTML Question

margin of -15px on hover to make div bigger pushes bootstrap columns below lower

It's mostly in the title. I am displaying products in divs on my website and on hover, I make them increase in size by applying a margin of -15px, to give them a nice hover effect. When I hover over any of them it is fine except for the right-most ones, as it pushes the products below it away into the bootstrap row below. Here are images:

Good (hover over a middle one):

enter image description here

Bad (hover over the right-most one):

enter image description here

Here is the code:

Search results page:

<div id="search-results">
<div data-bind="template: { name: 'product-template', foreach: allProducts }"></div>
</div>


product template:

<script type="text/html" id="product-template">
<div class="col-sm-6 col-lg-2" style="margin-top:20px; padding: 25px;">
<div class="product-item">
<div data-bind="style: { backgroundImage: 'url(\'../../the_vegan_repository/product_images/' + product.imagePath + '\')' }"
style= "height: 160px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: white;
background: center no-repeat;
background-size:cover;
vertical-align:bottom;">
</div>
<div style="height: 110px; padding: 10px; background: #fc4747;">
<h6 class="medium-text" data-bind="text: product.brand" style="text-transform: uppercase; color: white; margin-top:0; margin-bottom:5px;"></h6>
<h6 class="medium-text" data-bind="text: product.name" style="text-transform: uppercase; color: white; margin-bottom:5px;display: inline;"></h6>
</div>
</div>
</div>
</script>


css:

div.product-item:hover {
margin: -15px;
}
div.product-item {
border: 5px solid #fc4747;
border-radius: 15px;
height: 240px;
overflow: hidden;
cursor: pointer;
}


How do I stop the bootstrap grid system from pushing the bottom row into the row lower?

Answer

Use transform: scale(1.1); instead of margin: -15px;.

Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW]. CSS Transforms Module Level 1

Comments