Foros del Web » Creando para Internet » CSS »

Galeria de imagenes con efecto hover

Estas en el tema de Galeria de imagenes con efecto hover en el foro de CSS en Foros del Web. Hola,me gustaría saber si usando bootstrap se podría crear una galeria de imagenes tipo "thumbnail" que cuando se pase el ratón por encima(hover) se visualice ...
  #1 (permalink)  
Antiguo 29/06/2016, 14:18
 
Fecha de Ingreso: octubre-2013
Mensajes: 62
Antigüedad: 10 años, 6 meses
Puntos: 0
Galeria de imagenes con efecto hover

Hola,me gustaría saber si usando bootstrap se podría crear una galeria de imagenes tipo "thumbnail" que cuando se pase el ratón por encima(hover) se visualice el título o letras que yo le ponga dejando la imagen original de fondo.
  #2 (permalink)  
Antiguo 29/06/2016, 19:13
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Galeria de imagenes con efecto hover

Usando Bootstrap puedes añadir tus clases y cualquier propiedad y valor CSS que necesites.
__________________
(:
  #3 (permalink)  
Antiguo 30/06/2016, 15:10
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 1 mes
Puntos: 1826
Respuesta: Galeria de imagenes con efecto hover

La idea general será que encima tengas un objeto con
Código CSS:
Ver original
  1. p{opacity: 0;}

Y al pasar el mouse encima

Código CSS:
Ver original
  1. p:hover {opacity: 1;}

Puedes usar además una transición:

Código CSS:
Ver original
  1. p {opacity: 0;
  2. transition: opacity 1s;}
  #4 (permalink)  
Antiguo 07/07/2016, 03:36
 
Fecha de Ingreso: febrero-2016
Ubicación: Tenerife
Mensajes: 6
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Galeria de imagenes con efecto hover

Buenos dias Bustamanter
Creo que a lo que te refieres es a realizar un tooltip al hacer hover en la imagen, no es demasiado complicado hacer un tooltip simple, aquí tienes un ejemplo de tooltips desde varias posiciones:
http://www.w3schools.com/css/css_tooltip.asp
En cualquier caso y si te fijas, tanto en la clase del tooltip indica la misma posicion que en el after. Creando unos keyframes puedes hacer con css lo que te de la gana dentro de la imagen, asi puedes hacer que aparezcan bordes con texto encima, etc...
Espero que te ayude! un saludo!

Etiquetas: bootstrap
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:08.