0

tengo el siguiente problema y necesitaria ayuda. Tengo una card, donde dentro tienen dos elementos, uno para la imagen y otro para unos textos y un button. Puse un hover transform: sacale(), pero al hacer hover me deforma parcialmente el div de mi texto, teniendo unas lineas que aparecen y desaparecen, mas un movimiento indeseado en el texo.

Dejo el link de una pequeña grabacion que hice con respecto al problema: https://screenrec.com/share/xw3yHf1ngc

Y dejo el codigo:

<div className="card">
            <div className="card-imageContent">
                <img className="card-img" src={`/${foto}`} alt={nombre} />
            </div>
            <div className="card-text">
                <div className="card-title">{nombre}</div>
                <div className="card-title"><em>Bodega: {bodega}</em></div>
                <div className="card-price">AR$ {(precio * precioDolar).toFixed()} c/u</div>
                <div className="card-price">US$ {precio} c/u</div>
                <Link to={`/detalle/${id}`} className="card-link">
                    <button className="card-btn">VER MAS</button>
                </Link>
            </div>
        </div>
.card {
    width: 350px;
    height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 4px black solid;
    border-radius: 10px;
    background-color: white;
    margin: 5px;
    transition: all .5s;

    &:hover {
        transform: scale(1.02, 1.02);
        transition: all .5s;
    }

    &-imageContent {
        height: 75%;
    }

    &-img {
        height: 100%;
    }

    &-text {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 25%;
        width: 100%;
        background-color: black;
        color: white;
    }

    &-link {
        width: 100px;
        height: 30px;
        z-index: 0;
    }
        
    &-btn {
        width: 100px;
        height: 30px;
        border: 2px black solid;
        border-radius: 5px;
        background-color: #932b27;
        color: white;
        text-transform: uppercase;
        font-weight: 700;
        z-index: 8;
        cursor: pointer;
    }

}

Desde ya se agradece cualquier ayuda que me puedan dar.

5
  • Estas trabajando con React?
    – JoseMgz_Ux
    Commented el 15 nov. 2022 a las 15:19
  • Debes poner un ejemplo reproducible, con HTML y CSS "compilado"; y con las imágenes respectivas
    – Yussef
    Commented el 15 nov. 2022 a las 17:30
  • Jose: Si, estoy trabajando con React. Yussef: La verdad que no se como hacerlo si te referis a ejecutar el codigo en esta plataforma, por eso puse un video, para que puedan ver lo que me sucede. De todos modos, voy a investigar como hacer lo que decis para aplicarlo. Commented el 15 nov. 2022 a las 21:31
  • Ver lo que sucede no significa "poder arreglarlo". Si no podemos tocar y cambiar el código, cómo vamos a probar si podemos arreglarlo?? Haz un ejemplo ejecutable, puedes usar sitios como stackBlitz para hacer un ejemplo mínimo verificable (NO HACE FALTA TODO TU PROYECTO! Solo lo justo para reproducir el problema). En StackBlitz puedes crear proyectos de angular, react y muchos otros frameworks!
    – Benito-B
    Commented el 15 nov. 2022 a las 21:34
  • Jonatan te entiendo, a veces es complicado generar un ejemplo mínimo. Yo ejecutaría el proyecto y presionaría Ctr+U (Ver código de fuente) y copio la porción de código importante (esto ya está "compilado"), luego busco el CSS relevante a esa porción de código. En el video que pusiste se deja ver que no debería ser mucho código.
    – Yussef
    Commented el 15 nov. 2022 a las 23:55

1 respuesta 1

1

    .card {
        border: 1px solid black;
        max-width: 300px;
    }

    .card-img {
        height: 100%;
        left: 0;
        object-fit: cover;
        object-position: center;
        margin: 0 auto;
        position: absolute;
        right: 0;
        transition: all 600ms ease;
        width: 100%;

    }

    .card-header {
        border-bottom: 1px solid grey;
        height: 200px;
        position: relative;
        overflow: hidden;
    }

    .card:hover .card-img {
        transform: scale(1.2, 1.2);
    }
<div class="card">
    <div class="card-header">
        <img src="https://www.w3schools.com/css/paris.jpg" class="card-img"/>
    </div>
    <div class="card-body">
        <h1>Prueba</h1>
        <p>Lorem ipsum</p>
    </div>
</div>

Entiendo que lo que quieres es que al hacer :hover, lo único que aumente sea la imagen.

Lo que está pasando es que el scale se lo aplicas al elemento entero, y, como la imagen ocupa un porcentaje del alto de la .card, este porcentaje es un valor mayor cuando más grande sea la .card.

Lo que te recomiendo es que el escalado lo apliques a la imagen. Para que no se deforme tendrías que darle un tamaño fijo a .card-imageContent y ponerle posición absoluta a .card-img. Luego, para que se accione con el :hover:

.card:hover .card-img { transform: scale(1.02, 1.02); }

Por cierto, la propiedad transition sólo es necesaria en el elemento en estado "normal", si se lo pones dentro del :hover no va a hacer nada.

Espero haberte sido de ayuda ;)

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.