Positioning top of element relative to table cell when position is absolute - css

Question

Please go to my site here:
http://35.232.230.0:81/
You'll see a table of catalog items. Hover over one of the images. You should see the image enlarge.
You might also notice the image flickers a bit. This happens when you hover the mouse over the upper portion of the thumbnail.
The reason this is happening is because, as you'll notice, the top edge of the enlarged image is position around the middle of the thumbnail image. This means that when the image enlarges, the mouse is positioned just above the enlarged image. This means that as soon as you move the mouse, it detects that as a mouseout event, which causes the image to shrink again. But this in turn triggers the enlargement because the mouse is still hovering over the thumbnail image. This results is a cycle of enlarging and shrink which, when seen really fast, gives you the flicker.
So I'm wondering if there's a way to force the top of the enlarged image to be the same as the thumbnail image.
The hover event causes a css transition where the class being transitioned to sets the image's position to absolute:
img {
transition: width 0;
&:hover {
position: absolute;
z-index: 100;
width: 300px;
border: 1px solid black;
box-shadow: 5px 5px 10px grey;
transition: width .2s linear;
}
}
I would try to adjust the enlarge image's top property by setting it to 0, but with position: absolute, this just results in the image being positioned at the top left corner of the screen. I'm not sure how to calculate the position in CSS relative to its containing element (a td in a angular mat-table), so I'm a bit at a loss as to how to do this.
Any help would be much appreciated. Thanks.

Answer 1

First, for position: absolute to achieve your desired effect, you'd need to have positioned parent it can relate to (anything that is not position: static).
That means setting position: relative on the containing <td> should work. But alas, it doesn't. :( That is because relative position on table cells is undefined and most browser don't handle it very well. Bummer.
So, your best bet is to wrap your image with a <div> (or something similar) with position: relative set like in the following example.
table {
border-collapse: collapse;
}
table th,
table td {
padding: 5px;
}
table td {
border-top: 1px solid;
}
div {
height: 100px;
position: relative;
width: 100px;
}
img {
border: 1px solid transparent;
height: auto;
position: absolute;
transition: width .2s linear;
width: 100px;
z-index: 100;
}
img:hover {
border-color: #000;
box-shadow: 5px 5px 10px grey;
width: 400px;
z-index: 110;
}
<table>
<tr>
<th>Name</th>
<th>Image</th>
<th>Description</th>
</tr>
<tr>
<td>Name</td>
<td>
<div>
<img src="https://dummyimage.com/400x400/f48224/fff" alt>
</div>
</td>
<td>Description</td>
</tr>
<tr>
<td>Name</td>
<td>
<div>
<img src="https://dummyimage.com/400x400/f48224/fff" alt>
</div>
</td>
<td>Description</td>
</tr>
<tr>
<td>Name</td>
<td>
<div>
<img src="https://dummyimage.com/400x400/f48224/fff" alt>
</div>
</td>
<td>Description</td>
</tr>
</table>
Another solution might be to work with CSS transforms (scale), since those don't alter the element's document flow.