Estoy trabajando en un código de prueba para una tienda, y estaba haciendo que al hacer hover sobre una de las imágenes esta crezca durante 0.5 segundos (y que cuando quito el hover vuelva a su tamaño original en el mismo tiempo), pero noté que cuando crece cualquiera de las imágenes, todo lo demás es empujado hacia la derecha. Osea, que las imágenes crecen en esa dirección (y hacia abajo). ¿Cómo hago que el el div que contiene tanto las imágenes como los elementos de alrededor se mantenga centrado aún así o que en primer lugar las imágenes crezcan también hacia la izquierda?
Este es el código en cuestión (completo):
* {
color: #007700;
}
#global-container {
position: relative;
}
caption,
fieldset {
border: none;
}
input {
border: none;
}
#productbuy-table {
position: absolute;
top: 106.25px;
left: 200px;
border: 2px solid #53EA53;
background: #EEE;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
.tabletitle,
.product-img-1,
.product-img-2,
.product-img-3,
.product-img-4,
.product-img-5,
.productimg1,
.productimg2,
.productimg3,
.productimg4,
.productimg5 {
border-top-left-radius: 7.5px;
border-top-right-radius: 7.5px;
}
.tabletitle,
.product-img-1,
.product-img-2,
.product-img-3,
.product-img-4,
.product-img-5,
.product-name-1,
.product-name-2,
.product-name-3,
.product-name-4,
.product-name-5,
.product-description-1,
.product-description-2,
.product-description-3,
.product-description-4,
.product-description-5,
.product-price-1,
.product-price-2,
.product-price-3,
.product-price-4,
.product-price-5,
.product-quantity-1,
.product-quantity-2,
.product-quantity-3,
.product-quantity-4,
.product-quantity-5,
#product-buy-button {
border: solid 1px #028D02;
background: #DDD;
}
.tabletitle,
.product-img-1,
.product-img-2,
.product-img-3,
.product-img-4,
.product-img-5,
#product-buy-button {
background: none;
}
#product-buy-button {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.product-img-1,
.product-img-2,
.product-img-3,
.product-img-4,
.product-img-5 {
-webkit-transition-duration: 0.75s;
-moz-transition-duration: 0.75s;
-ms-transition-duration: 0.75s;
-o-transition-duration: 0.75s;
transition-duration: 0.75s;
}
.product-img-1:hover,
.product-img-2:hover,
.product-img-3:hover,
.product-img-4:hover,
.product-img-5:hover {
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-transition-duration: 0.75s;
-moz-transition-duration: 0.75s;
-ms-transition-duration: 0.75s;
-o-transition-duration: 0.75s;
transition-duration: 0.75s;
}
.product-img-1 .productimg1:hover,
.product-img-2 .productimg2:hover,
.product-img-3 .productimg3:hover,
.product-img-4 .productimg4:hover,
.product-img-5 .productimg5:hover {
transition: width 0.5s, height 0.5s, transform 0.5s;
width: 300px;
height: 300px;
box-sizing: border-box;
}
.product-img-1 .productimg1,
.product-img-2 .productimg2,
.product-img-3 .productimg3,
.product-img-4 .productimg4,
.product-img-5 .productimg5 {
transition: width 0.5s, height 0.5s, transform 0.5s;
}
#buttoninput:active,
#buttonsubmit:active {
background-color: #A3A3A3;
}
#buttonsubmit {
border: solid 1px #028D02;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Práctica 1</title>
<link rel="stylesheet" type="text/css" href="Práctica 1 (2).css">
</head>
<body>
<div id="global-container">
<div id="productbuy-table">
<div id="table-title">
<center>
<table>
<center>
<caption>
<fieldset><em>
<h1><span class="tabletitle"> Productos </span></h1>
</em>
</fieldset>
</caption>
</center>
</div><br>
<br>
<div id="product-images">
<tr class="product-img">
<td class="product-img-1">
<center><img class="productimg1" src="https://cdn-icons-png.flaticon.com/512/687/687259.png" width="155px" height="155"></center>
</td>
<td class="product-img-2">
<center><img class="productimg2" src="https://cdn-icons-png.flaticon.com/512/687/687259.png" width="155px" height="155"></center>
</td>
<td class="product-img-3">
<center><img class="productimg3" src="https://cdn-icons-png.flaticon.com/512/687/687259.png" width="155px" height="155"></center>
</td>
<td class="product-img-4">
<center><img class="productimg4" src="https://cdn-icons-png.flaticon.com/512/687/687259.png" width="155px" height="155"></center>
</td>
<td class="product-img-5">
<center><img class="productimg5" src="https://cdn-icons-png.flaticon.com/512/687/687259.png" width="155px" height="155"></center>
</td>
</tr>
</div>
<div id="product-names">
<tr class="product-name">
<td class="product-name-1">
<center><input id="buttoninput" type="button" value="Producto" size="15" name="5" style="width: 155px;"></center>
</td>
<td class="product-name-2">
<center><input id="buttoninput" type="button" value="Producto" size="15" name="5" style="width: 155px;"></center>
</td>
<td class="product-name-3">
<center><input id="buttoninput" type="button" value="Producto" size="15" name="5" style="width: 155px;"></center>
</td>
<td class="product-name-4">
<center><input id="buttoninput" type="button" value="Producto" size="15" name="5" style="width: 155px;"></center>
</td>
<td class="product-name-5">
<center><input id="buttoninput" type="button" value="Producto" size="15" name="5" style="width: 155px;"></center>
</td>
</tr>
</div>
<div id="product-descriptions">
<tr class="product-description">
<td class="product-description-1">
<center><em><strong>Descripción</strong></em></center>
</td>
<td class="product-description-2">
<center><em><strong>Descripción</strong></em></center>
</td>
<td class="product-description-3">
<center><em><strong>Descripción</strong></em></center>
</td>
<td class="product-description-4">
<center><em><strong>Descripción</strong></em></center>
</td>
<td class="product-description-5">
<center><em><strong>Descripción</strong></em></center>
</td>
</tr>
</div>
<div id="product-prices">
<tr class="product-price">
<td class="product-price-1">
<center><em><strong>Precio</strong></em></center>
</td>
<td class="product-price-2">
<center><em><strong>Precio</strong></em></center>
</td>
<td class="product-price-3">
<center><em><strong>Precio</strong></em></center>
</td>
<td class="product-price-4">
<center><em><strong>Precio</strong></em></center>
</td>
<td class="product-price-5">
<center><em><strong>Precio</strong></em></center>
</td>
</tr>
</div>
<div id="product-quantities">
<tr class="product-quantity">
<td class="product-quantity-1">
<center><input type="text" placeholder="Cantidad" value="" size="15" name="23" style="text-align: center; width: 155px; font-style: italic;"></center>
</td>
<td class="product-quantity-2">
<center><input type="text" placeholder="Cantidad" value="" size="15" name="24" style="text-align: center; width: 155px; font-style: italic;"></center>
</td>
<td class="product-quantity-3">
<center><input type="text" placeholder="Cantidad" value="" size="15" name="23" style="text-align: center; width: 155px; font-style: italic;"></center>
</td>
<td class="product-quantity-4">
<center><input type="text" placeholder="Cantidad" value="" size="15" name="24" style="text-align: center; width: 155px; font-style: italic;"></center>
</td>
<td class="product-quantity-5">
<center><input type="text" placeholder="Cantidad" value="" size="15" name="24" style="text-align: center; width: 155px; font-style: italic;"></center>
</td>
</tr>
</div>
</table>
</center><br>
<div id="product-buy-button">
<fieldset>
<center><input id="buttonsubmit" type="submit" value="Enviar" style="width: 155px; height: 35px;"></center>
</fieldset>
</div>
</div>
</div>
</body>
</html>