Efecto Hover a una Imagen con Html y Css 

Suscríbete ✅ para más vídeos tutoriales de proyectos web 💻 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ♦ Síguenos en Facebook! 👇: bit.ly/face-oficial-sleedw ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ♦ Únete a nuestro grupo de WhatsApp 👇: bit.ly/sleedw-grupo-whatsapp ▶ Saludos y que Dios te bendiga. 🙌

Bravo chaval, es unico que se a explicado como debe ser y encima funciona, habre probado unos 200 y ninguno fuciono, me has hecho un favor enorme, para ti ese me gusta

Muchas gracias, estoy empezando este hermoso mundo tecnologíco. Y con tus cortos videos aprendo mucho.. gracias..

Excelente tutorial! Codigo simple, bello y facil! He visto que en otros tutoriales se complican mucho y la verdad tu lo haces ver de una manera limpia y ordenada sin complicaciones! Gracias por compartir!! Excelente servicio ⭐⭐⭐⭐⭐

GRACIAS!!!!!! ahora puedo terminar mi proyecto de la uni gracias a ti!!!

Esto es oro, que bueno que existen estos videos, gracia

Te felicito la verdad que te quedo muy bien el video, explica muy bien y me ayudo en mi proyecto, me suscribí a tu canal, pulgar arriba y a combatir.

Excelente explicación, funciona de maravilla. Dios te bendiga !!!!

Muchas gracias!! La practica me salio excelente, ya estoy ansiosa en colocarlo en mi pagina. Muchas gracias!!

Muy bien explicado! Graciass

Una pregunta, por ejemplo si no quiero centrar la imagen y quiero ponerla más arriba al ras del nav, que sintaxisis debo colocar para que esta justo abajo del nav?

Muchisimas gracias por el video, me gusto mucho.

terrible amigo, que buen tutorial excelente la explicación, acabo de crear algo para mi pagina alucinante! te agradezco de corazón y bendiciones loco!

Tus vídeos son buenos bro, me ayudo mucho este video a un proyecto que estoy haciendo te dejo mi like y suscripción ;b

Y como lo harias con border linear gradient y y border radius pero solo para la parte de bottom de la imagen? Tipo cuando pasa el mouse el border, y sin hover que se muestre solo la imagen con el border radius

super claro y util!! muchas gracias

Te agradesco mucho, me sirvió un montón

Gracias amigo, me ayudaste bastante :)

Es justo lo que estaba buscando!! Para una imagen queda perfecto, pero ¿cómo hago para que este efecto salga solo en una imagen dentro de un slide con varias más?

Muchas gracias amigo, me sirvio mucho

Muchas gracias! Me sirvió bastante, una duda, si mis imagenes son png circulares cómo hago que la capa sea circular también y no cuadrada?

buenas, como le hago para poner a los costados mas imagenes, porque solo son para abajo una despues de otra si pongo varios con el mismo codigo

Que bien explicado, tu video es algo simplemente perfecto! vas por buen camino sigue adelante me suscripto para ver tus proximos proyectos saludos y bendiciones

buenas bro, de donde puedo estudiar como hacer animaciones con css html y javascript?

Muchisimas gracias , me has sacado de un gran apuro ¡¡

Muchisimas Gracias, solo tenia una duda pero el video me lo aclaro Muy buen contenido continua asi!!

Muy bueno! me sirvio 10/10

te ganaste un like excelente efecto para las tarjetas de mis proyectos.

Copié la etiqueta div y cambie el nombre de la imagen nueva,lo hice con el archivo HTML no sé si en css le tenga que modificar algún dato o solo en puro HTML desde la etiqueta div

saludos ya descargue el braquets, esta genial

Muy valiosa informacion amigo gracias

gracias me ayudaste en mi proyecto

hola muy bueno tu esplicacion te quiero hacer una consulta esto tambien se puede hacer con javascrip? sie se puede me lo mostrarias gracias

Hola. Excelente explicación. Lo haces ver muy fácil. Sin embargo, me pregunto: si tengo varias imágenes en la misma pagina, todas van dentro de una sola etiqueta o cada una debe tener su propia etiqueta? De cualquier forma, mil gracia por compartir. Saludos venezolanos.

Muy bueno ! Excelente explicado

Muchas gracias amigo, me ayudaste bastante. Ya le deje el buen like como corresponde y mi sub.

Amigo muchas gracias me re ayudo tu video.

¿Alguien me podría ayudar?, coloque el código y funciona pero al momento de pasar el mouse encima, donde aparece el texto no me muestra el fondo, ¿que puedo hacer?

Sos un genio, gracias UwU

Me gusta como explicas los videos

Excelente!

Que exelente Gracias :3

gran vídeo amigo, nuevo suscriptor :)

muy bueno y claro. Gracias.

Sos un crack.

muchas gracias :)

hola, seguí todos los pasos, me quedo de diez. lo único que no puedo hacer es centrar la imagen. alguna recomendacion?

hola, gracias por tan buen video, quisiera saber ¿para qué ponés ese > en el hover?

Me ayudo muchisisimo tu tutorial♥

Gracias bro

Como lo puedo adecuar a un responsive para que se vea bien en cualquier dispositivo?

super explicito y useful. me suscribo

muy amable caballero, Dios le conceda salud.

hola amigos como estan, como hago para que me quede responsive, en mi caso agrage 6 etiquetas figure pero no se ordenarlos para que me quede en bloque. este es mi contacto por si me pueden ayudar gracias

Excelente explicando, al fin me salió :"v

Gracias Bro, no entendi nada el video pero me sirvio ♥

hola! muy buen video! pero tengo un problema, no me aparece el texto y hice exactamente lo mismo que vos, tenes idea de cual puede llegar a ser el problema?

gracias crack

como hago para que no se me deforme la imagen de fondo del hover al achicar la pantalla?

muchas gracias, me salió en mi proyecto:

qué puedo hacer si me deja un espacio en blanco en la parte de arriba de la página?

es el video mejor explicado para este efecto hover

como le cambio el color de las letras?

hola, puse tres imágenes con efecto hover con display flex para verlos a los tres de manera horizontal, pero cuando maneja la ventana de la pagina, osea la achico y la agrando a mi antojo, no se ponen una abajo del otro, como hago eso? y si uso el flex-wrap no funciona, se ponen uno abajo del otro directamente.

muy buen video me ha servido de mucho

hola buenas noches, te pregunto como se hace para que cuando se pare en la imagen, me enlace a otra pagina. tengo el cursor:pointer; pero no me lleva al enlace que tengo en la imagen.

Y si lo quiero hacer pero con el efecto de carrusel

Como puedo poner 2 iguales en la misma Pag? No me deja hacerlo

Holaa, tengo una pregunta , en el caso de que decida hacer 2 imagenes y ponerlas unas al lado de la otra como tendría que hacer? Gracias

buenas, para una imagen esta genial. Pero estoy rompiendome la cabeza para agregar mas imagenes y se muestren separadas y en filas y columnas de 3 o 4. espero me puedas ayudar. gracias. un saludo

Hola, soy nuevo en esto. Qué idle usas ?

Como sería en caso le quiera agregar dentro de ese cuadro, un botón que también use hover? :'u

Excelente bro, pero tengo una pregunta, como hago si quiero agregar mas imagenes.

Y esto como lo agrego al código de un blog?

me sirvio gracias bro eres un capo xd

una pregunta, quiero hacer ese efecto, pero con 4 o mas imágenes y necesito que estén una al lado de la otra horizontalmente....¿que debo hacer?

Me funciona de maravilla, pero tengo una pregunta. ¿Como podria hacerle si quiero que esa imagen sea un boton?; lo he intentado directamente con el pero no funciona, ¿tendrias algun consejo?

Si quieren poner una imagen al lado de la otra modifíquenla y pongan "display: inline-flex; " en contenedor de nada

Hola! como lo puedo poner a la derecha?

Hola alguien sabe como hacer este codigo para poner varias imagenes

mas efectos por favor mas mas super. y como se aplica de forma invertida que haga el zoom hacia atras

Hola que tal, me ayudó mucho tu video. Quisiera saber cómo hacer para que, además del hover effect que le puse a la imagen con el texto y eso, que cuando la gente clicke vaya a otra página. (básicamente meterle un enlace a todo el elemento).

hola como estas? mira este es mi código de Css, no me funciona nada me podrías decir que tengo malo, gracias {margin: 0;padding: 0;box-sizing: border-box; font-family: sans-serif;} .contenedor { width: 100px; display: flex; justify-content: center; align-items: center; height: 100px; } .contenedor figure { position: relative; height: 250px; width: 350px; overflow: hidden; border-radius: 6px; box-shadow: 0px 15px 25px rgba(0,0,0,0.50); cursor: pointer; } .contenedor figure img{ width: 100px; height: 100px; transition: all 500ms ease-out; } .contenedor figure .capa{ position: absolute; top: 0; width: 100px; height: 100px; background: rgba(11,103,123,0.6); transition: all 500ms ease-out; opacity: 0; visibility: hidden; text-align: center; } .contenedor figure:hover > .capa{ opacity: 1; visibility: visible; } .contenedor figure:hover > .capa h3{ color: #fff; font-weight: 400; margin-bottom: 120px; transition: all 500ms ease-out; margin-top: 30px; } .contenedor figure:hover > img{ transform: scale(1.3); } .contenedor figure .capa p{ color: #fff; font-size: 15px; line-height: 1.5; width: 100px margin: auto; }

Hola mi pregunta es si es que hay alguna forma de cuando le clickeas al boton te lleve a un link Edit: Ya lo pude hacer gracias a otro tutorial tuyo ajajaja un grande

Hola buenas noches hermano como estás? Muy bueno el vídeo me gustó mucho y estoy aprendiendo a programar y quisiera hacerte una pregunta porque cuando uno los dos códigos y lo inserto en Google sites me aparece la imagen con barras para subir y desplazar la imagen hacia los lados mi pregunta es por qué en vídeo sale completa y en Google sites sale con barras me podrías ayudar con ese problema por favor

amigo buenas, podrias explicar como hacerlo responsive, q tambien se pueda para celulares?? gracias

Hola, muy buen video. ¿Pero podría ayudarme a crear un hipervínculo para la imagen, de modo que cuando haga clic en ella me lleve a otro índex?

Esto funciona aunque mi imagen sea un boton?

buren video, no pude captar si usas visual studio u otro. Saludos y buen video

como coloco una imagen alado de la otra?

Trate de colocar más imágenes pero no podía alguien que me pueda ayudar Gracias 🥺👉👈

Hola.

a mi no me sale :C

Alto tutorial si no le pones musica mejor :v