Cards - Tarjetas con Efecto Hover - Html y Css

Подписаться 10 тыс.

Просмотров 114 тыс.

50% 1

En este tutorial de SLee Dw, aprenderás a crear unas hermosas tarjetas, con un efecto hover, con solo Html y Css, en muy poco tiempo y bien explicado.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
♦ Plantilla Web de Música (En venta - Cupón de Descuento-20%: SLEEDW):
pay.hotmart.com/D42782257W
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
♦ Link de este Proyecto web (Descárgalo aquí) 👇🏻:
bit.ly/sleedw-cards-hover
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
♦ Únete a nuestro grupo de WhatsApp 👇🏻:
bit.ly/sleedw-grupo-whatsapp
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
♦ Síguenos en Facebook! 👇🏻:
bit.ly/sleedw-facebook
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Link de tipo de letra 👇🏻:
fonts.google.com/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Suscribete para mas vídeos nuevos!! que estoy subiendo diariamente... Gracias por tu apoyo y no olvides de dejarme tu hermoso like 👍🏻, que eso me motiva mas a hacer contenidos sobre estos proyectos..

Опубликовано:

14 янв 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 159

@SLeeDw 4 года назад

Suscrìbete para mas vídeos nuevos!! que estoy subiendo 2 a 3 vídeos semanalmente😍💌 Gracias por tu apoyo y no olvides en dejarme tu hermoso like 👍🏻 que eso me motiva para hacer màs tutoriales de Proyectos Web.😊👋🏻 :::::::::::::::::::::::::::::::::::::::::::::::::::::::: ♦♦♦ SIGUEME EN FACEBOOK♦♦♦ web.facebook.com/SLee-Dw-102638024655607/ :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Si tienes alguna duda sobre este proyecto web 🤔 No olvides en decírmelo aquí 👇🏻💌 en los comentarios y yo te ayudare en lo que desees mi estimado programador😊👍

@mariangelesfigueroa8262 Год назад

Mi hermano!!! Me salvaste la vida con tu explicacion. Millones de gracias!!!!!!!

@Reonaru 5 месяцев назад

Excelente . . . repito . . . excelente . . . gracias por compartir tan valioso conocimiento 👏👏👏

@ernieperes6650 11 месяцев назад

saludos, sus tutoriales están claros y muy creativos, lo mejor

@fernandatrujillo2010 2 года назад

Tu forma de explicar cada paso es genial. Gracias 😘

@SLeeDw 2 года назад

Hola, muchas gracias por tu comentario, nos alegra muchísimo saber que estamos ayudando a muchas personas con nuestro contenido.. Saludos y Dios te bendiga 🙌💻

@girasemacaceres 2 года назад

Excelente el tutorial, es el único video que me ha explicado a detalle y con buen ritmo cómo hacer unas cards. Saludos desde Panamá!

@SLeeDw 2 года назад

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

@adanvalenzuela1865 3 года назад

Muchas gracias por este tutorial y el material que se encuentra en tu sitio. Agradezco el tiempo que inviertes para compartir tus conocimientos

@SLeeDw 3 года назад

Muchas gracias a ti por el apoyo, Saludos y Dios lo bendiga

@hayvervargas3671 2 года назад

Para que sea responsive design: En la clase container, están estás propiedades: Width: 100%; Display: Flex; Max-width: 1100px; Agregan: flex-wrap: wrap; Para que sea responsive design

@juansolorzano8486 2 года назад

Mas eficiente es trabajar con grid

@hayvervargas3671 2 года назад

@@juansolorzano8486 si bro, pero la mayoría de personas que ven este video hasta ahora comienzan (Aclaro que no soy un experto, ni se mucho)🤷 y sí de les dice que hay que aplicar grid, PS no sabrán cómo hacerlo en todo, por qué casi todo se guiarán por el vídeo XD

@Agustin-sx7ku Год назад

@@hayvervargas3671 gracias por tu aporte, me gusta tu punto de vista con respecto a los que ven el video .

@cajadeemociones6880 Год назад

Muy buen punto, solo una duda, si el contenedor por defecto ocupa el 100% porque debemos agregar esta propiedad si de por si la tiene el elemento Div.

@seongyoon5972 2 года назад

Este ya es el segundo video que me ayuda con mis trabajos, muchas gracias

@SLeeDw 2 года назад

Me alegra mucho a ver ayudado. Saludos

@sebastiangallon8638 3 года назад

parce, muy muy útil este tutorial ,seguí sacando mas cositas así excelente!!!

@SLeeDw 3 года назад

Hola amigo, muchas gracias por el comentario y el apoyo, Saludos y que Dios te bendiga 💻🙌

@GemDrix День назад

Estoy aprendiendo y de verdad muy agradecida! me quedo claro todo y porqué debo usar cada cosa :D

@juancarlosruiz3399 Год назад

Muy pero muy bueno 👏🏻👏🏻 muchas gracias

@_-lux-_4095 2 года назад

fuiste mi salvación el día de hoy, muchas gracias por tu contenido

@SLeeDw 2 года назад

Muchas gracias por tu comentario. Saludos y bendiciones💻🙌

@neoxcore 5 месяцев назад

nose que será de tu vida amigo pero este video es lo mejor que he visto, espero que andes bien. saludos desde Argentina

@SLeeDw 5 месяцев назад

Muchas gracias. Estaré subiendo más videos la semana entrante. Saludos cordiales

@cristiancontreras2387 2 года назад

Mas personas como tu!!!

@jorgefelipegutierrezrosas2897 2 года назад

Excelente, gracias por compartir tus conocimientos.

@SLeeDw 2 года назад

Muchas gracias por tu comentario. Saludos y Bendiciones 💻🙌

@emanuelr9815 3 года назад

Wow hermano explicas muy bien, sigue asi le entendi muy bien, andaba buscando un contenido asi. Ya me suscribí

@SLeeDw 3 года назад

Hola amigo programador, muchas gracias po tu comentario y por tu suscripción, Saludos y Dios te bendiga💻🙌

@teresahernandez4874 4 года назад

Eres muy bueno explicando¡¡ me suscribí ya que me estas ayudando mucho con una asignatura de programacion ^^

@rodogames726 5 месяцев назад

quedó muy bien. suscrito

@osorioriveraalinebetzabe1801 2 года назад

De verdad muchas gracias me ayudó bastante ahora puedo hacer más bonitas mis tareas 😊

@SLeeDw 2 года назад

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

@missli3753 Год назад

Thank you for the presentation and I use your card for my portfolio.

@luca99full Год назад

excelente explicacion!

@tomasponce9409 Год назад

Gracias capo! me sirvió mucho!

@edsonme9 3 года назад

Muy buen video! Me sacaste de un apuro brother! 👍🏽

@toderox 2 года назад

Excelente, bro!

@ial04t 3 года назад

me sirvió un monton, quisier mas videos asi de transiciones :D

@SLeeDw 3 года назад

Hola, muchas gracias por tu comentario, estaremos próximamente subiendo más videos de este tipo, ¡No te los pierdas!, Saludos y Dios te bendiga💻🙌

@estefa0058 3 года назад

oye, eres muy bueno explicando. necesitaba esto para poder terminar mi sitio web. eres el mejor!!

@SLeeDw 3 года назад

Muchas gracias por tu comentario, me alegra muchísimo a ver ayudado en algo, Suerte y Éxitos💻🙌

@ruthtobaar7915 3 года назад

Si es verdad eres el mejor

@SLeeDw 3 года назад

@@ruthtobaar7915 Hola muchas gracias por tu comentario, Saludos y Dios te bendiga.

@ruthtobaar7915 3 года назад

Disculpen, son comentarios de mi hijo que le gusta ver tutoriales y anda enfocado en html, css, angular. Tiene 10 años pero una ortografia jejejeje.

@ruthtobaar7915 3 года назад

@@SLeeDw Amén igual para ti, mi hijo ve mucho sus videos

@alessandrocl7264 6 месяцев назад

Gracias bro, me ayudaste

@santosjosueromeroochoa9244 Месяц назад

Gracias explicas muy buen

@little_lu8961 2 года назад

Graciassss

@SLeeDw 2 года назад

Muchas gracias por tu comentario. Saludos y Bendiciones 🙌💻

@jesusrodriguez-vx5kn Год назад

Excelente aporte bro. Sigue adelante, y exitos en la vida !!!

@adamdaam921 2 года назад

¡Muchas gracias!

@tokitoka5313 3 года назад

SOOOOOS UN CRACK !!!!

@blah9372 2 года назад

Tremendo tutorial bro, gracias

@SLeeDw 2 года назад

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

@anahiramirez4696 Год назад

GRACIAS ME SALVASTE

@Tami-ib4gi Месяц назад

Que bonito!!! 🎉🎉🎉🎉🎉

@cristhianmarulanda1030 Год назад

super bien explicado

@yussetrodriguez6907 Год назад

Gracias por este video, me ayudó muchísimo ❤️

@gastyymendez9383 Год назад

TE AMO.

@michikomalandro1 Месяц назад

Buen video!

@sebastianvallena6816 Год назад

muy bien explicado

@mcbailonxd4245 4 года назад

Gracias bro, me salvaste

@SLeeDw 4 года назад

De nada bro.. Muchas gracias por comentar..😎 Saludos y Éxitos..

@maikolguerrero9395 Год назад

Tome su like buen hombre

@nicolascabj4407 Год назад

Que buen video amigo!!!!

@SLeeDw Год назад

Muchas gracias. Saludos

@miguel5213 3 года назад

Muy buen video c:

@jovahinrivera9484 3 года назад

UN CRACK

@enriqueboscan3550 7 месяцев назад

Viejo tu usas la etiqueta figure por semantica ? O es por algo en especifico ? Muy bueno tu video

@fiu5014 2 месяца назад

GRACIAS AMIGO

@SLeeDw 2 месяца назад

Es un placer ayudar. Saludos

@digitalmundo- 2 года назад

bueno amigo me inspiro algo para un proyecto en mente que tengo gracias por el aporte bendiciones te ganaste suscriptor

@seunomeaqui_ Год назад

Thanks bro!

@oscarimg1173 Год назад

parceee muy buen video y me gusta que expliques para qué es cada cosa. Gracias.

@PolancoMC 2 года назад

Debe tener 100K de suscriptores mínimo!

@SLeeDw 2 года назад

Muchas gracias por el apoyo. Saludos y Bendiciones 🙌💻

@PolancoMC 2 года назад

@@SLeeDw bendiciones para ti, ojalá que puedas crecer mucho!

@_-lux-_4095 2 года назад

nuevo sub >D

@cristianlopez8279 2 года назад

tu mouse me da ansiedad pero en general me gusto tu video

@cristianlopez8279 2 года назад

toma tu like

@gamecold 3 дня назад

Una consulta y como se haria una tarjeta o imqgen que cuando el mouse lo mira o lo tiene mirado salta una sombra y texto

@unaverdadsencilla 3 года назад

Me gustó mucho tu vídeo, tal vez un poco más lento para mí jaja ... Me suscribire, pero porfa necesito saber cómo cambiar el espacio entre las tarjetas...

@hackoomb 3 года назад

como podria mostrar los articulos de una base de datos con el efecto de cards que se genere automaticamente con el siguiente articulo que ingrese?

@saulcarlosvelasquezquispe2929 2 года назад

sos un crak papa me salvaste la vida like y sub por el link

@SLeeDw 2 года назад

Hola, muchas gracias por el apoyo a éste canal. Saludos y Bendiciones 🙌💻

@marcorodriguez8891 3 года назад

Excelente lo que nos compartes, me gustó mucho, bien explicado, lo aplicaré en mi sitio. ¿Tienes alguna página para seguirte? Saludos

@SLeeDw 3 года назад

Hola Marco, gracias por comentar, y que bueno que te gusto nuestro video tutorial 💻🙌, y claro qué si, nuestro sitio web es sleedw.ga , Saludos y Éxitos Crack..💻

@JonathanOrtiz-nc8yl 2 года назад

y si quiero poner mas cards abajo, como haria?

@Asador92 11 месяцев назад

gracias amor yo tenia otro problema y me faltaba cambiar img por .card para que no me afectara a todas las img xd

@danielroque1211 7 месяцев назад

5 PALABRAS: CRACK

@alonsomartinez6039 День назад

Pero ahí es una palabra xd

@julianbuch1985 3 года назад

mi proyecto de computacion es esto basicamente

@Julitriana10 2 года назад

Buen tuto, pero bro ayudame, lo que pasa es que mi container no se alinea esta uno sobre otro y asi y reviso y reviso y todo esta igual al tuyo que puede ser

@richellyguerrero3919 2 года назад

Los píxeles de las imágenes no influyen? Lo hice y se ven mal… no sé si es porque son muy grandes

@yenniferangomasdiaz6514 Год назад

Pero una pregunta a mi las tablas me salen en un solo lado, las quiero en el centro como hago?

@pablozamer6543 Год назад

muy bueno de gran ayuda, tb por bootstrap se podría lograr el mismo efecto?

@cajadeemociones6880 Год назад

Claro que sí.

@yagaaldana5332 Месяц назад

Como le hizo para que todas las imagenes se hicieran al mismo tiempo?

@javiercastro2754 3 года назад

Excelente, deberías de hacer un vídeo de como hacerlas responsive.

@marcorodriguez8891 3 года назад

@emanuelr9815 3 года назад

@demfex2762 3 года назад

@jaimedejesusninomachado7719 Год назад

Muchas gracias me sirvio para mi proyecto pero me gustaria saber como puedo añadir otras 3 tarjetas abajo de las que ya se realizaron?

@SLeeDw Год назад

Hola, muchas gracias por su comentario, para que las demás tarjetas se posicionen hacia abajo debe agregarle al contenedor una propiedad de CSS que es: flex-wrap:wrap; Saludos y bendiciones.

@unaverdadsencilla 3 года назад

Me gustaría pedirte si puedes hacer un vídeo donde expliques como hacer un carousel de imágenes tipo Netflix o al menos responsive...

@ezequielbernuchi8808 3 месяца назад

Como hago para que quede responsive?

@naydelinjaz 3 месяца назад

¿Cómo puedo hacer las tarjetas pero en el bloc de notas?

@NanakusaxX Год назад

god :D

@miguelangelrodriguezreyes290 10 месяцев назад

¿Como hago para ocultar las tarjetas de la izquierda y derecha sin que la tarjeta del centro se extienda de más?

@user-xo1qx1pl5q 6 месяцев назад

como colocar texto o imagenes dentro del cards

@xxarmane15xx86 Год назад

HGracias bro me sirvio, pero necesito hacerlo en columnas es decir una fila 3 con 2 columnas

@infernalenemy 2 года назад

Excelente video. Una pregunta, ¿como haces para que el texto quede justo dentro del espacio, y no se salga y quede oculto con por la propiedad overflow: hidden;?

@SLeeDw 2 года назад

Hola, muchas gracias por tu comentario. Respecto a tu pregunta. Para que el texto no se salga de su elemento padre (card). Se genera automáticamente unas dimensiones (ancho y alto) a las cards, ya que le hemos agregado un diplay flex, para que sean cajas flexibles y de esa forma respentando el ancho de cada cards, simple y sencillamente.. le agregamos un relleno y un margen para que no estén juntas las cards. Saludos y Bendiciones 🙌💻

@christopher_yt9147 2 года назад

una pregunta de cuantos pixeles son las imagenes porque se me bugeo todo XD

@alexalagunagalvez1218 3 года назад

Disculpa hasta se pone body ? No me quedo claro

@Jamon-xj3ip 2 года назад

alguien sabe como ponerlas debajo en vez de al lado?

@maykelpineda1868 Год назад

Buen video, tengo una duda, ¿como puedo ubica una tarjeta debajo de otra?

@patriciobenitez4946 Год назад

Creo que primero tendrias que hacer que las cards sean cajas flexibles (display: flex) y alinearlas verticalmmente con flex-direction: column

@augusto0187 3 года назад

Gracias por el video, ya me estoy estresando jaja hago todo igual y me quedan una debajo de la otra

@alexalagunagalvez1218 3 года назад

Intenta poner en css . container Colums=3;

@lizbethcastro942 2 года назад

Me funcionó de maravilla, pero como puedo agregar más de 3 imágenes y que haya un boton de siguiente como tipo carrusel?

@jhonatanveliz4580 Год назад

Tendrás que crear un botón y a ese ponerle href. Y luego a en esa otra "página" haces más tarjetas

@gaelromerovazquez9781 Год назад

Hola,perdón una pregunta, ¿como puedo hacer que para que lo que yo agregue aparezca encima de eso o por de bajo? Es que agregó cosas que me faltan y se pone a un lado 😭😭

@leidyquishpe4085 7 месяцев назад

hola tengo la misma duda si encontraste la solucion te agradecería que me la compartas

@mar.77.7 Год назад

el transform no me quiere funcionar :(

@genesiskatherinecaminoguan7831 Год назад

ayudaaaaa no se me cambian el tamaño de las imagnes :c

@zostantinesugs4066 Год назад

siempre que intento replicar estos ejemplos a mi la medidas me salen bien raras a pesar de que sigo todo al pie de la letra y al final termino yo haciendo mis medidas y cambiando algo pero muy buenos videos me das nuevas ideas con lo que enseñas

@SLeeDw Год назад

Muchas gracias por tu comentario, saludos y bendiciones

@amv0rgesakangreburger831 Год назад

hola bro una consulta como puedo hacer para que se vayan acomodando hacia abajo? pasa que coloco mas imágenes pero solo quedan hacia el costado y no se acomodan en auto

@dairaalanis6369 Год назад

@omaryesidmartinez1507 Год назад

Porque no me muestra las imágenes

@manu_743 7 месяцев назад

A mí no se me forman los cuadros , las imagenes me salen enormes

@orealisospina5555 3 года назад

hola ,tengo un problema me aparece las card de manera vertical y no horizontal que puedo hacer?

@SLeeDw 3 года назад

Hola, muchas gracias por tu comentario, te compartiré el link de este proyecto web, para que lo compares con tu proyecto -> sleedweb.ga/cardshover , Saludos y Dios te bendiga..

@scarlenmenacastillo9827 4 года назад

SLee Dw hola tengo un problema y es que en ves de estar vertical me aparece horizontal que crees que puedo hacer

@SLeeDw 4 года назад

Hola Scarlen, gracias por comentar, respecto a tu pregunta, este proyecto web (Cards-Tarjetas efecto hover) las tres tarjetas deben estar una al lado de la otra, en una posición "horizontal" (que es lo correcto), más no están en vertical (linea recta), me gustaría saber más detalladamente tu problema con el proyecto para ayudarte correctamente☺💻.. Saludos y Éxitos...🙌👍

@SLeeDw 4 года назад

@@scarlenmenacastillo9827 Claro me puedes contactar por el Facebook de SLee Dw que está en la descripción y en el primer comentario, o también por el grupo de WhatsApp (SLee Dw), que te estaré dejando en este enlace si gustas unirte, y consultar tus dudas de cualquier proyecto web.👉 chat.whatsapp.com/Bq9yPZMPqZ3FNt8BRCbyi8 Saludos y Éxitos🙌💻

@danissadiaz5833 Год назад

¿Cómo hago para que las cards me queden alienados horizontalmente? Hice todo y están en posición vertical, una arriba de la otra 😢

@solbilbaoladreche7133 Год назад

ah me pasa lo mismo

@navazvol.2516 Год назад

.container{ width: 100%; display: flex; max-width: 1100px; } .card{ width: 100%; height: 50%; margin: 20px; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2); }

@lizortellado9765 2 года назад

como hago si son mas de 3 cajas? xq me quedan todas juntas y casi ni se ve el contenido

@fridavargas4286 Год назад

@César Alexander Ortiz Miralda te go el mismo problema

@kellyjohannacervantessilve9670 3 года назад

una pre para que es el otro atributo all creo que era... no he visto el video completo tal vez hasta lo diga :v

@grodriguezzabaleta 3 года назад

Hola buen día, y son responsive...??'

@SLeeDw 3 года назад

hola, gracias por tu comentario, este proyecto si es responsive lo puedes descargar en sleedweb.ga/cardshover , Saludos, Dios te bendiga.

@grodriguezzabaleta 3 года назад

@@SLeeDw Gracias.

@yuskekurusaki6563 3 года назад

como puedo hacer para que queden de 2 en 2 al ponerlo en modo celular?

@miguel5213 3 года назад

Hola amigo, Lo puedes hacer con las propiedades de display grid , junto con sus propiedades de grid-template-columms solo que no le agregarias a tu container display:flex; usa grid pero te aseguro que si lo haces bien te saldrá mucho mas fácil Saludos.

@hayvervargas3671 2 года назад

Bro has esto En la clase container, están estás propiedades: Width: 100%; Display: Flex; Max-width: 1100px; Agregan: flex-wrap: wrap; Para que sea responsive design

@hayvervargas3671 2 года назад

Espero no sea muy tarde xd. Y por supuesto haber ayudado

@yuskekurusaki6563 2 года назад

@@hayvervargas3671 ya lo resolví hace meses pero gracias por responder

@hayvervargas3671 2 года назад

@@yuskekurusaki6563 con gusto bro.