Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Transiciones y Transformaciones CSS Primeros Pasos con Transformaciones CSS Desafío de Transformaciones CSS

Publicado por Juliet Netsai Chihwanda
Juliet Netsai Chihwanda
4,928 Puntos

escribe una transformación que moverá un elemento 100% desde su lugar original

en el .photo

style.css 
/* transiciones de superposición e img ---------- */

.superposición,
img  {
    transition: transformar .6s ease-out;
}

/* transformaciones de superposición e img ---------- */

.foto:desplazamiento del ratón .superposición {
transform-origin: 100% 100%;
}
.foto:desplazamiento del ratón img {

}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Desafío de Transformación</title>
    <meta name=viewport contenido=width=device-width, initial-scale=1.0>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='hoja de estilos' type='texto/css'>
    <link rel=stylesheet href=page.css>
    <link rel=stylesheet href=style.css>
</head>
<body>
    <div class=container>

        <div class=foto>
          <img src=1.jpg alt=Big Sur>
          <div class=overlay>
              <h3>Big Sur, California</h3>
              <p>Big Sur es una sección accidentada de la costa central de California entre Carmel y San Simeon.</p>
            </div>
        </div>

    </div>
</body>
</html>

1 Respuesta

Austin Whipple
Austin Whipple
29,847 Puntos
Austin Whipple
Austin Whipple
29,847 Puntos

Hola Juliet,

Esta pregunta te pide que realmente muevas el .overlay elemento hacia arriba. Tu regla actualmente solo está configurando la ubicación utilizada para comenzar la transformación usando transform-origin. La propiedad que deseas usar aquí es transform: y querrás configurar eso usando translateY() para mover la superposición hacia arriba (un valor negativo) 100%.

¡Experimenta con esos y mira si eso te ayuda!