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 2 meses 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 2 meses 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 2 meses 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. 2 años 2 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. 2 años 2 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. 2 años 2 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. 2 años 2 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. 2 años 2 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
  • Moderador
  • 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. 2 años 2 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 6 años 2 meses antes por Cristian
3775 Visitas
1 Respuestas emo
Categoría: Pack Empresa
Tema iniciado 6 años 3 semanas antes por Narciso
992 Visitas
14 Respuestas emo
Categoría: Joomla 1.5
Tema iniciado 7 años 2 meses antes por Rosa
4040 Visitas
4 Respuestas emo
Categoría: Joomla 1.7
Tema iniciado 7 años 1 mes antes por Juan Carlos
8711 Visitas
1 Respuestas emo
Categoría: Pack Tienda Joomla
Tema iniciado 7 años 5 días antes por Acaymo Suárez García
2182 Visitas
9 Respuestas emo
Categoría: Joomla 2.5
Tema iniciado 3 años 9 meses antes por Francisco Saborido Amaya
1054 Visitas
3 Respuestas emo
Categoría: Joomla 3.0
Tema iniciado 4 años 1 mes antes por Victor
1548 Visitas
11 Respuestas emo
Categoría: Joomla 3.0
Tema iniciado 3 años 8 meses antes por Silvia
3216 Visitas
2 Respuestas emo
Categoría: Joomla 2.5
Tema iniciado 7 años 2 meses antes por Enoc
3158 Visitas
1 Respuestas emo
Tema iniciado 1 año 7 meses antes por Antonio
413 Visitas

Tiempo de carga de la página: 0.392 segundos