Efecto Hover a una Imagen con Html y Css
HTML-код
- Опубликовано: 11 янв 2025
- En este tutorial, aprenderás cómo hacer un hermoso efecto hover en una imagen utilizando únicamente HTML y CSS. Con unas pocas líneas de código, podrás darle un toque interactivo y elegante a cualquier imagen en tu sitio web. 🚀
♦ Recursos incluidos en el video:
💻 Código completo del proyecto web 👇🏻:
bit.ly/efecto-...
♦ Recursos Útiles para Desarrolladores:
🌐 Visita mi sitio web para más recursos 👇🏻:
bit.ly/sleedw
📱 Únete a nuestra comunidad en WhatsApp y comparte tus proyectos o dudas que tengas 👇🏻:
bit.ly/sleedw-...
🔵 Síguenos en Facebook 👇🏻:
bit.ly/face-of...
¡No olvides suscribirte! Subo nuevos videos todos los días con tutoriales útiles y prácticos. Dale like 👍🏻 si te ha gustado este tutorial, ¡tu apoyo me motiva a seguir creando más contenido increíble!
#EfectoHover #HTML5CSS3 #DiseñoWeb #EfectoImagen #SLeeDw #DesarrolloWeb
Suscríbete ✅ para más vídeos tutoriales de proyectos web 💻
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🌐 Visita mi sitio web para más recursos 👇🏻:
- bit.ly/sleedw
📱 Únete a nuestra comunidad en WhatsApp y comparte tus proyectos o dudas que tengas 👇🏻:
- bit.ly/sleedw-grupo-whatsapp
🔵 Síguenos en Facebook 👇🏻:
- bit.ly/face-oficial-sleedw
▶ Saludos y que Dios te bendiga. 🙌
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 ⭐⭐⭐⭐⭐
Muchas gracias, Saludos.
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 explicación, funciona de maravilla. Dios te bendiga !!!!
Hola muchas gracias por su comentario, Saludos y Dios lo bendiga 🙌💻
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!
Hola, muchas gracias por tu comentario. Saludos y Bendiciones 🙌💻
Esto es oro, que bueno que existen estos videos, gracia
Muchas gracias. Saludos
Muchas gracias!! La practica me salio excelente, ya estoy ansiosa en colocarlo en mi pagina. Muchas gracias!!
Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga💻🙌
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.
GRACIAS!!!!!! ahora puedo terminar mi proyecto de la uni gracias a ti!!!
Muchisimas gracias , me has sacado de un gran apuro ¡¡
Muchas gracias a ti Teresa por comentar.. me alegra mucho en a verte ayudado con nuestro contenido..
Si te gusta nuestros videos, no olvides en Suscribirte y regalarme tu hermoso like👍 me ayudarías muchísimo..☺
Saludos y Éxitos..🙌💻
@@SLeeDw tienes mis likes y subscripcion, sigue asi 👌
Muy bien explicado! Graciass
te ganaste un like excelente efecto para las tarjetas de mis proyectos.
Muchas gracias amigo, Saludos y Dios te bendiga 🙌💻
super claro y util!! muchas gracias
Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga 🙌💻
Muchisimas gracias por el video, me gusto mucho.
muy amable caballero, Dios le conceda salud.
Muchas gracias. Saludos 😊🙌
Me gusta como explicas los videos
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
Hola, muchas gracias por tu comentario, me alegra muchisimo en a verte ayudado con tu proyecto, y también gracias por apoyar este canal..
Saludos y Exitoss!!
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
Muchas gracias por su apoyo, saludos y bendiciones
Muchas gracias amigo, me sirvio mucho
Gracias Bro, no entendi nada el video pero me sirvio ♥
Hola, muchas gracias por tu comentario, Saludos y bendiciones 💻🙌
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.
saludos ya descargue el braquets, esta genial
Muchisimas Gracias, solo tenia una duda pero el video me lo aclaro
Muy buen contenido continua asi!!
Hola, muchas gracias por tu comentario🙌💻, me alegra muchísimo que te halla servido de algo nuestro contenido. Saludos y Éxitos...
Te puede interesar este video también: ruclips.net/video/qYZ7T88YbDM/видео.html
gracias me ayudaste en mi proyecto
Gracias amigo, me ayudaste bastante :)
es el video mejor explicado para este efecto hover
Hola, muchas gracias por tu comentario. Saludos y Bendiciones
muchas gracias, me salió en mi proyecto:
Es responsive??
Te agradesco mucho, me sirvió un montón
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?
Amigo muchas gracias me re ayudo tu video.
Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga🙌💻
Muchas gracias amigo, me ayudaste bastante. Ya le deje el buen like como corresponde y mi sub.
Hola amigo, muchas gracias por el apoyo, Saludos y Díos lo bendiga
Te puede interesar este video también: ruclips.net/video/qYZ7T88YbDM/видео.html
Muy bueno ! Excelente explicado
Muchas gracias. Saludos y Dios te bendiga🙌💻
super explicito y useful. me suscribo
Muchas gracias amigo, Saludos y que Dios te bendiga🙌💻
Te puede interesar este video también: ruclips.net/video/qYZ7T88YbDM/видео.html
Excelente explicando, al fin me salió :"v
Muchas gracias 👋🏻😊 Saludos!!
la cosa es que entiendas la lógica de cada código no copy past
Muy valiosa informacion amigo gracias
hola muy bueno tu esplicacion te quiero hacer una consulta esto tambien se puede hacer con javascrip?
sie se puede me lo mostrarias gracias
Muy bueno! me sirvio 10/10
muy bueno y claro. Gracias.
Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga🙌💻
Te puede interesar este video también: ruclips.net/video/qYZ7T88YbDM/видео.html
Sos un genio, gracias UwU
gran vídeo amigo, nuevo suscriptor :)
Hola, muchas gracias por el apoyo, saludos y Dios te bendiga.
muy buen video me ha servido de mucho
Muchas gracias amigo, Saludos y Dios lo bendiga🙌💻
Te puede interesar este video también: ruclips.net/video/qYZ7T88YbDM/видео.html
Me ayudo muchisisimo tu tutorial♥
Te puede interesar este video también: ruclips.net/video/qYZ7T88YbDM/видео.html
hola, seguí todos los pasos, me quedo de diez. lo único que no puedo hacer es centrar la imagen. alguna recomendacion?
muchas gracias :)
Excelente bro, pero tengo una pregunta, como hago si quiero agregar mas imagenes.
quieres hacer una especie de carrusel dentro del contenedor?
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
pudiste?
@@jeferssondanielardilarodri4121 si, aprendí flex y grid y me resultó muy fácil
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?
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
hola, gracias por tan buen video, quisiera saber ¿para qué ponés ese > en el hover?
buen video, yo hice una galeria, pero me sirvio bastante para dimensionar las imagenes, una pregunta, como hago si tengo tres imagenes en linea y yo solo quiero que hayan 2 imagenes una alado de la otra y cuando se pase de esa cantidad apile en la siguiente fila?
Un grid de 2 columnas
me sirvio gracias bro eres un capo xd
Hola, muchas gracias por tu comentario,Saludos y Dios te bendiga💻🙌
@@SLeeDw gracias a ti deberías subir más efectos con el hover estaría bueno
Te puede interesar este video también: ruclips.net/video/qYZ7T88YbDM/видео.html
Gracias bro
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?
Que exelente
Gracias :3
Si quieren poner una imagen al lado de la otra modifíquenla y pongan "display: inline-flex; " en contenedor de nada
¿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?
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?
Hola, gracias por comentar, respecto a tu pregunta, lo que necesitas es primeramente tener ésta lineas de código en tu archivo "Html"👇💻
(Primero: Creas un contenedor con la etiqueta ""dentro de , dentro de esa etiqueta "div" irá las imágenes que desees agregar..un ejemplo claro así☺👇)
(Segundo: en tu hoja de estilos "Css" deberas de colocar estás lineas de código👇☺👇que vamos a estar utilizando "FlexBox", para que tus imágenes estén una al lado de la otra, utilizaras esta propiedad "display:flex;" dentro de tu contenedor, un ejemplo mas claro sería éste👇)
.contenedor{
width:100%;
max-width:1200px;
margin:auto;
display:flex;
}
.contenedor img{
width:25%;
heigth:250px;
}
Espero que te haya ayudado con mi respuesta, y si deseas puedes suscribirte a mi canal, apoyandome para seguir en este mundo de la programación y con estos tutoriales, que vendrán muchísimos más y también de flexbox...☺💻🙌
Saludos y Éxitos...👍☺
SLee Dw muy buen video bro, me suscribo, espero más videos!
@@marcon7580 Muchas Gracias amigo🙌💻, gracias por apoyar éste canal, estaré subiendo videos en éstos días..lo prometo☺💻
Saludos y Éxitos..🙌☺
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
@@luissynths en que campo?
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.
Hola, muchas gracias por tu comentario, repecto a tu petición, me gustaría ayudarle por interno. A través de Facebook -» facebook.com/sleedwsullana o por el WhatsApp que se encuentra en la descripción. Saludos y Dios lo bendiga💻🙌
Necesitas agregar la etiqueta
Hola, soy nuevo en esto. Qué idle usas ?
Hola, muchas gracias por tu comentario, yo utilizo el editor brackets.io , pero dejara de funcionar, así que me pasare a Visual Studio Code. Saludos y Dios te bendiga.
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
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
Sos un crack.
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 Ivan, muchas gracias por comentar, y que bueno que te ayudó uno de nuestros tutoriales, me alegra muchísimo saberlo, gracias por apoyar a este canal de aprendizaje..💻☺
Saludos y Éxitos Crack..🙌💻
En cual tuto muestra como hacerlo? :,v
@@hakuryuuko3845 metí un herf adentro y funco
mas efectos por favor mas mas super. y como se aplica de forma invertida que haga el zoom hacia atras
buenas bro, de donde puedo estudiar como hacer animaciones con css html y javascript?
Excelente!
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).
x2 yo tambien quiero saber como se hace, ya lo he intentado de todas las formas y no encuentro que lo coja.
@@Carlosreyes-rz2xh como lo logré ayer fue abriendo el justo antes del y luego cierras el justo después de cerrar el
Te puede interesar este video también: ruclips.net/video/qYZ7T88YbDM/видео.html
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.
como le hicisteeeee, a mi solo me aparece un efecto y no 16
buren video, no pude captar si usas visual studio u otro. Saludos y buen video
Muchas gracias, utilizo visual studio code.
Y si lo quiero hacer pero con el efecto de carrusel
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
gracias crack
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?
Hola, muchas gracias por tu comentario, claro que si te ayudo, en la descripción está el grupo de WhatsApp para que te unas y nos cuentes tu experiencia con este proyecto💻🙌 Saludos y que Dios te bendiga..
Utiliza la etiqueta
Puedes crear un enlace con una imagen dentro, entonces así tentrás en enlace con una imagen y no con un texto como se usa normalmente:
Puedes ver que en el enlace le especificamos que nos lleve al index.html, por lo tanto así tendremos una imagen que nos lleva al index.html
como le cambio el color de las letras?
amigo buenas, podrias explicar como hacerlo responsive, q tambien se pueda para celulares?? gracias
Yo también quiero saber 🙏🏼
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?
Hola Jine, muchas gracias por comentar, respecto a tu pregunta me gustaría ver tu código si no es molestia para poderte ayudar, en el problema que presentas con tu proyecto. Para eso te invito a que te unas a nuestro grupo de WhatsApp, que te estaré dejando por aquí el enlace : chat.whatsapp.com/Bq9yPZMPqZ3FNt8BRCbyi8, y puedas consultar cualquier problema con nosotros..
Saludos y Éxitos...
Te funciono?
Como lo puedo adecuar a un responsive para que se vea bien en cualquier dispositivo?
Como puedo poner 2 iguales en la misma Pag? No me deja hacerlo
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?
qué puedo hacer si me deja un espacio en blanco en la parte de arriba de la página?
como coloco una imagen alado de la otra?
Hola, gracias por tu comentario. Respecto a tu pregunta. Para que una imagen esté al lado de la otra, se utiliza la propiedad de CSS display: flex; .. para el contenedor de las imágenes.
como hago para que no se me deforme la imagen de fondo del hover al achicar la pantalla?
Hola! como lo puedo poner a la derecha?
Esto funciona aunque mi imagen sea un boton?
Hola, gracias por tu comentario. Respecto a tu pregunta , si funciona correctamente. Saludos y bendiciones 🙌
Como sería en caso le quiera agregar dentro de ese cuadro, un botón que también use hover? :'u
Hola alguien sabe como hacer este codigo para poner varias imagenes
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;
}
Y esto como lo agrego al código de un blog?
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
Trate de colocar más imágenes pero no podía alguien que me pueda ayudar
Gracias 🥺👉👈
Hola.
a mi no me sale :C
x2
Alto tutorial si no le pones musica mejor :v