Foro de soporte WordPress en español


Soporte WordPress en español Soporte gratuito para webs alojadas en Webempresa.com
Habilitado para todos los clientes con planes de Hosting Alto Rendimiento a partir de 3GB y planes XL.

No ofrecemos soporte a webs alojadas en servidores externos o localhost, ni soporte css o programación.

Te recomendamos que leas esta información sobre nuestro sistema de soporte en el foro, te ayudará a sacar el máximo partido de nuestro conocimiento: Cómo podemos ayudarte.


Encuentra la solución a tu problema, buscando en nuestro foro:
Bienvenido, Invitado
Nombre de Usuario: Contraseña: Recordarme

TEMA: Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima.

Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima. 2 años 8 horas antes #277256

Buenos días,
He estado buscando algún código css pero no lo he encontrado, a ver si ustedes me pueden ayudar.

Quiero hacer un hover que gire 180º y en la parte de atrás añadirle algo de texto, hasta ahora solo he conseguido convertir una imagen normal en una redonda, hacer que haga un zoom al pasar el ratón por encima pero quiero que también se voltee 180º para añadirle el nombre de la foto detrás de la imagen.

el codigo css que llevo utilizado es:
.zoom{
width: 205px;
height: 205px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
border-radius: 150px;
box-shadow: 0 0 20px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
transition: 1.5ms ease;
 -moz-transition: 1.5s ease; /* Firefox */
 -webkit-transition: 1.5s ease; /* Chrome - Safari */
 -o-transition: 1.5s ease; /* Opera */
}
.zoom:hover{
transform : scale(1.2);
-moz-transform : scale(1.1); /* Firefox */
-webkit-transform : scale(1.1); /* Chrome - Safari */
-o-transform : scale(1.1); /* Opera */
-ms-transform : scale(1.1); /* IE9 */	}


Y el codigo html es:

<center>
<div><a href="#"><img src="images/minis/mini1.jpg" alt="" class="zoom" /></a> <a href="#"><img src="images/minis/mini2.jpg" alt="" class="zoom" /></a> <a href="#"><img src="images/minis/mini1.jpg" alt="" class="zoom" /></a> <a href="#"><img src="images/minis/mini2.jpg" alt="" class="zoom" /></a></div>
</center>

A ver si me pudiesen ayudar.
Un cordial saludo
Guillermo Delgado


URL del sitio: Contenido oculto para usuarios invitados. Por favor, inicie su sesión para poder verlo.
  • Guillermo
  • Avatar de Guillermo
  • DESCONECTADO
  • Navegador Junior
  • Mensajes: 20
  • Karma: 0
Última Edición: 2 años 8 horas antes por Guillermo.
El tema ha sido cerrado.
Mejora la velocidad de tu WordPress

Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima. 2 años 1 hora antes #277294

Hola

Esto que comentas :
quiero que también se voltee 180º para añadirle el nombre de la foto detrás de la imagen.

supongo que te refieres rotar en z, pero queda mejor rotar en Y, algo como:

transform:rotateY(90deg);

esto dentro de .zoom:hover

Saludos.
Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.
El tema ha sido cerrado.
trasladar web gratis

Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima. 1 año 11 meses antes #277347

Buenos dias dias Jhon, eso ya lo probe y no responde a esa acción,
¿hay alguna otra manera de ponerlo?
tambien probe poniendole -webkit- y -moz- y no me respondia.
  • Guillermo
  • Avatar de Guillermo
  • DESCONECTADO
  • Navegador Junior
  • Mensajes: 20
  • Karma: 0
El tema ha sido cerrado.
solucionar problemas wordpress

Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima. 1 año 11 meses antes #277351

Solucionado este tema Jhon, me imagino que abra sido algun fallo de sintasis.

Y para la otra consulta,¿ como puedo añadirle texto detras de la imagen?
  • Guillermo
  • Avatar de Guillermo
  • DESCONECTADO
  • Navegador Junior
  • Mensajes: 20
  • Karma: 0
El tema ha sido cerrado.

Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima. 1 año 11 meses antes #277438

Hola

Eso depende de la estructura html, es decir el texto debe estar en un div u otro elemento html desde el inicio.

En tu caso puedes evaluar poner el texto como parte del anchor, es decir la etiqueta de link <a>
Luego con CSS puedes hacerlo block y posicionarlo con z-index .

Saludos
Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.
El tema ha sido cerrado.

Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima. 1 año 11 meses antes #278761

Buenos días,
Jhon he estado probrando pero no lo he conseguido, ¿me podria poner algun ejemplo de codigo para hacerme yo una idea?

Un saludo.
  • Guillermo
  • Avatar de Guillermo
  • DESCONECTADO
  • Navegador Junior
  • Mensajes: 20
  • Karma: 0
El tema ha sido cerrado.

¿Te ha resultado interesante esta entrada del foro?

Suscríbete para recibir consejos y trucos útiles para tu Web.

Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima. 1 año 11 meses antes #278792

Hola,

Te un enlace donde viene un ejemplo sobre cómo hacer esto:

stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering

Espero que te sirva.
  • Pablo Velasco
  • Avatar de Pablo Velasco
  • DESCONECTADO
  • Administrador
  • Mensajes: 20369
  • Gracias recibidas 2734
  • Karma: 758
Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.
El tema ha sido cerrado.

Hacer que gire una imagen 180º y añadirle texto detras de la imagen cuando pases el raton por encima. 1 año 11 meses antes #279698

No me sirvio pero gracias, abro otro hilo para otro asunto de css
  • Guillermo
  • Avatar de Guillermo
  • DESCONECTADO
  • Navegador Junior
  • Mensajes: 20
  • Karma: 0
El tema ha sido cerrado.

Temas Relacionados

3 Respuestas emo
Categoría: VirtueMart 2.0
Tema iniciado 5 años 11 meses antes por Cristian
3595 Visitas
1 Respuestas emo
Categoría: Pack Empresa
Tema iniciado 5 años 9 meses antes por Narciso
912 Visitas
14 Respuestas emo
Categoría: Joomla 1.5
Tema iniciado 6 años 11 meses antes por Rosa
3917 Visitas
4 Respuestas emo
Categoría: Joomla 1.7
Tema iniciado 6 años 10 meses antes por Juan Carlos
8473 Visitas
1 Respuestas emo
Categoría: Pack Tienda Joomla
Tema iniciado 6 años 9 meses antes por Acaymo Suárez García
2110 Visitas
9 Respuestas emo
Categoría: Joomla 2.5
Tema iniciado 3 años 6 meses antes por Francisco Saborido Amaya
962 Visitas
3 Respuestas emo
Categoría: Joomla 3.0
Tema iniciado 3 años 10 meses antes por Victor
1430 Visitas
11 Respuestas emo
Categoría: Joomla 3.0
Tema iniciado 3 años 5 meses antes por Silvia
2952 Visitas
2 Respuestas emo
Categoría: Joomla 2.5
Tema iniciado 6 años 11 meses antes por Enoc
3027 Visitas
1 Respuestas emo
Tema iniciado 1 año 4 meses antes por Antonio
358 Visitas

Tiempo de carga de la página: 0.415 segundos