I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - /. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.
I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - http://www.ikea./us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.
Share Improve this question edited Jan 13, 2018 at 8:46 ROMANIA_engineer 56.7k30 gold badges209 silver badges205 bronze badges asked Sep 13, 2012 at 7:08 user1664185user1664185 711 gold badge2 silver badges3 bronze badges 05 Answers
Reset to default 8use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.
use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.
Add position:absolute; to style of your div. This way it won't interfere with other elements but still overlap them, and you can specify any width and height to them.
Absolutely position your div and make sure the z-index is at the top level. It CAN be done using just CSS, but it'll probably be easier with js as well.
you can use transform: scale(x); to grow/shrink the div without affecting the other elements.