Efecto Hover a una Imagen con Html y Css

[@SLeeDw]

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. 🙌

[@p4selket]

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 ⭐⭐⭐⭐⭐

[@SLeeDw]

Muchas gracias, Saludos.

[@ovnishoy5219]

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

[@hopersk8]

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

[@eliassantos8982]

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

[@SLeeDw]

Hola muchas gracias por su comentario, Saludos y Dios lo bendiga 🙌💻

[@cristiansaturnini597]

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!

[@SLeeDw]

Hola, muchas gracias por tu comentario. Saludos y Bendiciones 🙌💻

[@alexandermedina689]

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

[@SLeeDw]

Muchas gracias. Saludos

[@anaortigoza5635]

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

[@SLeeDw]

Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga💻🙌

[@lidoazul]

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.

[@pablomigueldiazvizcaino7963]

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

[@teresahernandez4874]

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

[@SLeeDw]

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..🙌💻

[@teresahernandez4874]

@@SLeeDw tienes mis likes y subscripcion, sigue asi 👌

[@roxanap2653]

Muy bien explicado! Graciass

[@elbertjosesalasbrochero6318]

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

[@SLeeDw]

Muchas gracias amigo, Saludos y Dios te bendiga 🙌💻

[@luciapiro8207]

super claro y util!! muchas gracias

[@SLeeDw]

Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga 🙌💻

[@andresfelipepizoluligo1471]

Muchisimas gracias por el video, me gusto mucho.

[@michaelespinozabetanco109]

muy amable caballero, Dios le conceda salud.

[@SLeeDw]

Muchas gracias. Saludos 😊🙌

[@kerwincolon3222]

Me gusta como explicas los videos

[@sgdt6203]

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

[@SLeeDw]

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!!

[@jharolrojas8634]

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

[@SLeeDw]

Muchas gracias por su apoyo, saludos y bendiciones

[@BobStewartP]

Muchas gracias amigo, me sirvio mucho

[@agus9amarilla]

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

[@SLeeDw]

Hola, muchas gracias por tu comentario, Saludos y bendiciones 💻🙌

[@AEagle-ve]

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.

[@ernieperes6650]

saludos ya descargue el braquets, esta genial

[@craigresponsive849]

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

[@SLeeDw]

Hola, muchas gracias por tu comentario🙌💻, me alegra muchísimo que te halla servido de algo nuestro contenido. Saludos y Éxitos...

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/p4q9aIdubb6Veq8

[@aaronmayhua9525]

gracias me ayudaste en mi proyecto

[@pipock3643]

es el video mejor explicado para este efecto hover

[@SLeeDw]

Hola, muchas gracias por tu comentario. Saludos y Bendiciones

[@edgarbatzin2284]

Gracias amigo, me ayudaste bastante :)

[@LuisBurgosvilca]

muchas gracias, me salió en mi proyecto:

[@FacuCoyne]

Es responsive??

[@erikaleon9173]

Te agradesco mucho, me sirvió un montón

[@karen-19]

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?

[@joacoelia4904]

Amigo muchas gracias me re ayudo tu video.

[@SLeeDw]

Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga🙌💻

[@marcoantoniocanaza5994]

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

[@SLeeDw]

Hola amigo, muchas gracias por el apoyo, Saludos y Díos lo bendiga

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/p4q9aIdubb6Veq8

[@curiosoelgato]

Muy bueno ! Excelente explicado

[@SLeeDw]

Muchas gracias. Saludos y Dios te bendiga🙌💻

[@maximilianoarguello1779]

super explicito y useful. me suscribo

[@SLeeDw]

Muchas gracias amigo, Saludos y que Dios te bendiga🙌💻

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/p4q9aIdubb6Veq8

[@luise5224]

Excelente explicando, al fin me salió :"v

[@SLeeDw]

Muchas gracias 👋🏻😊 Saludos!!

[@joangarcia709]

la cosa es que entiendas la lógica de cada código no copy past

[@alexfonher]

Muy valiosa informacion amigo gracias

[@mastercomics2119]

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

[@matifrontend]

Muy bueno! me sirvio 10/10

[@alvaroschmit]

muy bueno y claro. Gracias.

[@SLeeDw]

Hola, muchas gracias por tu comentario, Saludos y Dios te bendiga🙌💻

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/p4q9aIdubb6Veq8

[@DarkGlassIleben]

Sos un genio, gracias UwU

[@gasparbrito2061]

gran vídeo amigo, nuevo suscriptor :)

[@SLeeDw]

Hola, muchas gracias por el apoyo, saludos y Dios te bendiga.

[@jpvladsa235]

muy buen video me ha servido de mucho

[@SLeeDw]

Muchas gracias amigo, Saludos y Dios lo bendiga🙌💻

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/p4q9aIdubb6Veq8

[@jinaduque6751]

Me ayudo muchisisimo tu tutorial♥

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/p4q9aIdubb6Veq8

[@marcelazamudio5748]

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

[@warriors000]

muchas gracias :)

[@santiagopoveda3179]

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

[@Baldur-Dev-Arts]

quieres hacer una especie de carrusel dentro del contenedor?

[@leonardomorrison5863]

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

[@jeferssondanielardilarodri4121]

pudiste?

[@leonardomorrison5863]

@@jeferssondanielardilarodri4121 si, aprendí flex y grid y me resultó muy fácil

[@IVANS310]

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?

[@stefanomarkernestoventurat5114]

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

[@Lashistoriasdelilith]

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

[@ybamv0g4d05]

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?

[@luisenriquecaleroanchelia6369]

Un grid de 2 columnas

[@miolitio901]

me sirvio gracias bro eres un capo xd

[@SLeeDw]

Hola, muchas gracias por tu comentario,Saludos y Dios te bendiga💻🙌

[@miolitio901]

@@SLeeDw gracias a ti deberías subir más efectos con el hover estaría bueno

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/p4q9aIdubb6Veq8

[@brandonjaviersotoesparza9218]

Gracias bro

[@goagao4231]

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?

[@josueantoniomolinarecancoj5761]

Que exelente Gracias :3

[@giovanijhostinblancocierto7529]

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

[@juancauich4576]

¿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?

[@d3ym_ca_cs86]

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?

[@SLeeDw]

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...👍☺

[@marcon7580]

SLee Dw muy buen video bro, me suscribo, espero más videos!

[@SLeeDw]

@@marcon7580 Muchas Gracias amigo🙌💻, gracias por apoyar éste canal, estaré subiendo videos en éstos días..lo prometo☺💻 Saludos y Éxitos..🙌☺

[@silviabonazza9565]

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

[@gonper352]

@@luissynths en que campo?

[@masmatepro]

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.

[@SLeeDw]

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💻🙌

[@TheEnriquePhone]

Necesitas agregar la etiqueta

[@cnickshendo]

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

[@SLeeDw]

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.

[@phalcom95]

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

[@jesusegm8646]

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

[@juanchongo77]

Sos un crack.

[@ivansellanes8291]

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

[@SLeeDw]

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..🙌💻

[@hakuryuuko3845]

En cual tuto muestra como hacerlo? :,v

[@ivansellanes8291]

@@hakuryuuko3845 metí un herf adentro y funco

[@kreiger8912]

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

[@tomassteven1]

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

[@sergiocontinanza8810]

Excelente!

[@daniel7893]

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).

[@Carlosreyes-rz2xh]

x2 yo tambien quiero saber como se hace, ya lo he intentado de todas las formas y no encuentro que lo coja.

[@daniel7893]

@@Carlosreyes-rz2xh como lo logré ayer fue abriendo el justo antes del y luego cierras el justo después de cerrar el

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/p4q9aIdubb6Veq8

[@Gaia-22]

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.

[@cacahuatanoir1979]

como le hicisteeeee, a mi solo me aparece un efecto y no 16

[@frankandresgarridoreyes3761]

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

[@SLeeDw]

Muchas gracias, utilizo visual studio code.

[@uzielbarajas28]

Y si lo quiero hacer pero con el efecto de carrusel

[@johanhenao8227]

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

[@Thomas-nw8fd]

gracias crack

[@luispedrazasuarez7294]

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?

[@SLeeDw]

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..

[@TheEnriquePhone]

Utiliza la etiqueta

[@AxelBenjamínAlvarezAlcaraz]

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

[@genesiskatherinecaminoguan7831]

como le cambio el color de las letras?

[@jarvs10]

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

[@NAYSURU61]

Yo también quiero saber 🙏🏼

[@jinejoy702]

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?

[@SLeeDw]

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...

[@juancamilosuarezgonzalez9826]

Te funciono?

[@fundacioncorafro3065]

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

[@ak4tzk136]

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

[@elinavictorica3675]

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?

[@ernestogomez538]

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

[@gonper352]

como coloco una imagen alado de la otra?

[@SLeeDw]

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.

[@alejootorres3820]

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

[@gildamarieguerreroaquino4686]

Hola! como lo puedo poner a la derecha?

[@blake_thrx4913]

Esto funciona aunque mi imagen sea un boton?

[@SLeeDw]

Hola, gracias por tu comentario. Respecto a tu pregunta , si funciona correctamente. Saludos y bendiciones 🙌

[@kennethj.mottaespinoza6728]

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

[@gemercito6814]

Hola alguien sabe como hacer este codigo para poner varias imagenes

[@Alehenao]

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; }

[@hakuryuuko3845]

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

[@josmarpena396]

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

[@jesusegm8646]

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

[@sergiocotero6622]

Hola.

[@sebastianmolina5201]

Alto tutorial si no le pones musica mejor :v

[@nombre_random]

a mi no me sale :C

[@sandobalvelasquezsherlinvi1504]

x2