I'm looking to hover over an image and have it enlarge (increasing the width
y height
) but when this happens, the other images and the table they are contained in move.
I want the image to be enlarged with hover
it, but the table and the other images remain static.
table{
border-collapse: collapse;
border: 1px solid;
}
td{
padding: 8px;
border: 1px solid;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2px;
grid-auto-rows: minmax(100px, auto);
}
.imagenPruebaTopLeft {
object-position: left top;
width: 100px;
height: 100px;
transition: width .5s height .5s;
position: relative;
margin: 0;
}
.imagenPruebaTopRight {
object-position: right top;
width: 100px;
height: 100px;
position: relative;
margin: 0;
}
.imagenPruebaBottomLeft {
object-position: left bottom;
width: 100px;
height: 100px;
position: relative;
}
.imagenPruebaBottomRight {
object-position: left bottom;
width: 100px;
height: 100px;
position: relative;
}
.imagenPruebaTopLeft:hover {
width: 120px;
height: 120px;
overflow: hidden;
}
.imagenPruebaTopRight:hover {
width: 120px;
height: 120px;
}
.imagenPruebaBottomLeft:hover {
width: 120px;
height: 120px;
}
.imagenPruebaBottomRight:hover {
width: 120px;
height: 120px;
}
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>CUIT / DNI</th>
<th>Número de pedido</th>
<th>Pedido Sap</th>
<th>Imágenes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
<td>
<div class="wrapper">
<img class="imagenPruebaTopLeft" src="~/ImgAndroid/Prueba1.jpg"/>
<img class="imagenPruebaTopRight" src="~/ImgAndroid/Prueba2.jpg"/>
<img class="imagenPruebaBottomLeft" src="~/ImgAndroid/Prueba3.jpg"/>
<img class="imagenPruebaBottomRight" src="~/ImgAndroid/Prueba4.jpg"/>
</div>
</td>
</tr>
</tbody>
</table>
The ideal for this case is to use the "scale()" function: https://developer.mozilla.org/es/docs/Web/CSS/transform-function/scale
If you notice, what it does is proportionally increase the size of the element, without affecting the neighboring elements. It's like putting a magnifying glass on the element itself. ;)