0

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>

1 respuesta 1

1

Para lograr ese efecto, puedes ocupar la propiedad "scale". Siendo 1 el 100%, 0.5 el 50%, 1.2 el 120%, etc

img{
 object-fit: cover;
 transition: scale 0.5s;
width:80px;
 height: 140px;
 
}

img:hover{
 scale:1.2;
}
div{
 border:4px solid black;
}

td{
 border:3px solid black;
}
<table>
<tr>
<td><center><img src="https://i.pinimg.com/originals/36/30/9f/36309f22e4c16447b085400be01bbc1e.png"></center></td>
<td><center><img src="https://i.pinimg.com/originals/36/30/9f/36309f22e4c16447b085400be01bbc1e.png"></center></td>
<td><center><img src="https://i.pinimg.com/originals/36/30/9f/36309f22e4c16447b085400be01bbc1e.png"></center></td>
</tr>
</table>

3
  • Me salió, pero entonces los bordes (que están en un td [a su vez en un tr, a su vez en un div], no en el propio img) se agrandan bruscamente. Es decir, sería algo así: <div><tr><td><center><img></center></td></tr></div>. Mientras que en CSS uso selección por contexto (solo aplico la transición al tr cuando hago hover en el img, así que creo que debería funcionar, pero no se si me estaré equivocando en algo. Commented el 27 sept. 2022 a las 14:39
  • @CristianVelarde Edité la respuesta, tratando de poner tu escenario, y como puedes ver los bordes quedan bien.
    – Yussef
    Commented el 27 sept. 2022 a las 14:52
  • Ahí lo arreglé, tuve que quitarle el selector por contexto y dejar que en general los td y lo que contengan crezca, así crecen tanto los bordes como la imagen de forma gradual. Gracias por tu ayuda. Commented el 27 sept. 2022 a las 14:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.