Hacer que gire una ...
Avisos
Vaciar todo

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

 
Guillermo
 Guillermo
Usuario eminente

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:

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

URL del sitio: Contenido solo visible a usuarios registrados

Este debate ha sido modificado el hace 4 años por antonio
Citar
Respondido : 21/04/2017 12:00 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

ResponderCitar
Respondido : 21/04/2017 6:30 pm

Guillermo
 Guillermo
Usuario eminente

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.

ResponderCitar
Respondido : 22/04/2017 11:55 am
Guillermo
 Guillermo
Usuario eminente

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?

ResponderCitar
Respondido : 22/04/2017 12:17 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

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
Luego con CSS puedes hacerlo block y posicionarlo con z-index .

Saludos

ResponderCitar
Respondido : 23/04/2017 5:53 pm
Guillermo
 Guillermo
Usuario eminente

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.

ResponderCitar
Respondido : 05/05/2017 12:53 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

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

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

Espero que te sirva.

ResponderCitar
Respondido : 05/05/2017 2:51 pm
Guillermo
 Guillermo
Usuario eminente

No me sirvio pero gracias, abro otro hilo para otro asunto de css

ResponderCitar
Respondido : 15/05/2017 3:11 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación