Within a column div, I have multiple rows with dynamic items whose quantity is uncertain. When hovering over an item, I'd like to increase its width and height. However, the issue arises when hovering over an item in the row with the most items, causing everything beneath it to be pushed down.
Is there a solution to this problem that doesn't involve using jQuery to determine the height of the tallest row and manually adding it as height to the selector class? Alternatively, could the item being hovered over trigger the item below it to decrease its height, preventing the shifting effect?
Thank you in advance for any insights!
HTML
<div class="section columns">
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 1
</div>
</div>
</div>
... (additional rows and columns)
</div>
<div>
I don't want this text to move when I hover and height increases
</div>