Estilos y Animaciones en Galerías con Figma y CSS
Contenido del curso
Alonso Chaves
Fabian Camilo Huertas Suarez
iecgerman .
----- ----
Ulqernesh Karvenae
Oscar Fuentes Esteves
Juan Sebastian Giraldo Escobar
Diego Andrés Lopez Rodriguez
Kenneth Angulo L
Kenneth Angulo L
Kenneth Angulo L
JOSE MARIA SUAREZ GIESE
Angie Alvarez
Bastian Maurico Landskron Silva
Daniel Andres Rojas Paredes
Pablo Alejandro Figueroa
Byron Tito
Juan David Santamaria Gomez
Si quieren que se vea un poco mas fluido al momento de pasar el mouse sobre una imagen pueden usar "transition-duration: 0.3s;" y ponerle el tiempo que ustedes gusten
.gallery{ margin: 60px; .gallery-images{ @include flexCenter(row, space-between, center); img{ width: 28vw; height: 45vh; object-fit: cover; object-position: 5px 35%; border-radius: 16px; &:hover{ transform: scale(1.1); transition-duration: 0.3s; } } } }
Buen tip Alonso gracias!
muy buena Capo, se ve menos robotica y mas lenta
Así fue como lleve la parte del gallery, hice que las imagenes agarren un tamaño cuadrado :D
.gallery{ @extend .about-us; &-images{ width: 100%; display: flex; justify-content: space-between; img{ aspect-ratio: 1/1; height: 100%; width: 30%; object-fit: cover; object-position: center; border-radius: 16px; transition: transform 0.2s; &:hover{ transform: scale(1.1); } } } }
button background-color: #FA9500 width: 260px height: 65px border-radius: 35px color: white font-size: 2.3rem &:hover transform: scale(1.1) animation: aumento 10s ease-in-out infinite 20s @keyframes aumento 0% background-color: #FA9500 20% background-color: #ffd6be color: #FA9500 50% background: none color: #fa6800 80% background-color: #ffd6be color: #FA9500 100% background-color: #FA9500
animation: aumento 10s ease-in-out infinite 20s @keyframes aumento 0% background-color: #FA9500 20% background-color: #ffd6be color: #FA9500 50% background: none color: #fa6800 80% background-color: #ffd6be color: #FA9500 100% background-color: #FA9500```
otra manera de de hacer más fluida la animación, a parte de la de transition-duration es con esta:
transition: transform 0.3s ease;
Siento que se tiene más control sobre esta forma, aunque para el ejercicio, ambas son igual de validas.
Con este código se ve mejor la animación tanto al hacer hover como al quitar el hover.
img{ width: 30vw; height: 45vh; border-radius: 16px; object-fit: cover; transition: transform 0.2s; &:hover{ transform: scale(1.1); transition: transform 0.2s; } }
Es decir que para que object position tenga algun efecto el contenedor de la imagen debe ser mas grande que el tamano de la foto !!
¡Exacto! El secreto está entre el tamaño que le das a la etiqueta <img> en CSS y el tamaño real de la foto original.
Si usas object-fit: cover, la foto se adapta a la fuerza a ese marco. Si sobra contenido porque no cabía completo, el object-position te deja decidir qué parte exacta queda visible dentro de ese recuadro. ¿Te queda más claro ahora?
SI tengo un contenedor (img) de 100 x 200 y estoy cargando una imagen de 100 x 200 pixeles.
QUe resultado tengo si uso object position: 5px 35%
Si la imagen y el contenedor miden exactamente lo mismo (100x200 píxeles), no hay espacio sobrante para moverse.
Por lo tanto, aunque apliques object-position: 5px 35%, la imagen no se desplazará visualmente en absoluto, ya que ocupa todo su marco. ¿Qué crees que pasaría si la imagen fuera más grande que el contenedor?
Explicame la propiedad object-position
Imagina que tu imagen es más grande que su marco. El object-position te deja elegir exactamente qué parte de la foto se asoma por la ventanita, usando coordenadas (como equis y ye o porcentajes) para desplazar el encuadre.
¿Hacia dónde crees que se movería la imagen si le pones object-position: center bottom?
Las animaciones que estoy utilizando son hovers para:
article{ button:hover{ transform:translateY(-2px); } } .product-card:hover{ transform: translateY(-6px); .icon{ svg:hover{ scale: 1.1; } } } .gallery{ .gallery-images{ @include flexCenter(column,center,center); gap: 20px; img:hover{ transform: scale(1.1); } } }
buenas noches explico algo de la terminal al inicio del curso prework ,pero perdi mi lapto entonces esto desde otra y pues ya regresarme me atrasaia estoy sigueindo ahora este curso pero lo que hago en editor de texto no se refleja en el live server seria de mucha ayuda que alguien me ayude para no regresarme gracias
Es que está trabajando con LocalHost y no con live server hay que instalar la dependencia
npm install -g sass
. aboutUs{ &__mision{ background-color: $fourd-color; @include flexCenter(row,space-evenly ,center ); div{ display:flex; } img{ margin: 4px; padding: 4px; width: 6rem; height: 6rem; align-self: center; justify-self: center; } p{ text-align: start; padding: 8px; margin: 16px; } } } a
/*este es mi codigo de la clase pasada ¿que opinion les debe respecto a el formato para escalabilidad ? al final no tengo claro si usar las tags en el css para dar estilos esta mal */
& img { width: clamp(250px, 25cqw, 380px); border-radius: 8px; aspect-ratio: 1 / 1; @include box-shadow(1px, 10px); opacity: 0.8; transition: transform 500ms ease-in, opacity 800ms ease-in; &:hover { transform: scale(1.1); opacity: 1; } }
transition: transform 0.3s ease;
Agregando esto a img puede hacer la transición mas suave y se ve mejor
.
