Globedia.com

×
×

Error de autenticación

Ha habido un problema a la hora de conectarse a la red social. Por favor intentalo de nuevo

Si el problema persiste, nos lo puedes decir AQUÍ

×
cross

Suscribete para recibir las noticias más relevantes

×
Recibir alertas

¿Quieres recibir una notificación por email cada vez que Gadgetsblogger escriba una noticia?

Zoom CSS con leyenda para imagenes

26/09/2014 01:50 0 Comentarios Lectura: ( palabras)

Hoy traigo un pequeño truco que puedes emplear a tu blog, tiene muy buena pinta pues hace ver a tu blog de una forma mas profesional limpia y moderna acorde al año en el que nos encontramos. Se trata de un pequeño zoom que se le hace a las imágenes cuando pasas el cursos sobre ella, también despliega una leyenda que hace que la imagen tenga mas presentación.

Para que tu puedas añadir este truco a tu blog, puedes hacerlo mediante la siguiente secuencia: Diseño - Diseñador de plantilla - Avanzado - Añadir CSS, ya que estas en esta parte de tu blog tienes que pegar el siguiente código que te proporcionaré:

.titlezoom{display:inline-block;overflow:hidden;position:relative;text-decoration:none}

.titlezoom:before{display:block;background-color:#000;content:"";height:100%;opacity:0;position:absolute;width:100%;z-index:2}

.titlezoom:after{display:block;background-color:rgba(255, 255, 255, 0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:3;padding:2% 3%}

.titlezoom img{border:none;display:block;z-index:1}

.titlezoom:before, .titlezoom:after, .titlezoom img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease}

.titlezoom:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}

.titlezoom:hover:before{opacity:0.3}

.titlezoom:hover:after{left:0}

Ya que el código se ha añadido, en la entrada HTML de algún articulo que quieras implementarlo tienes que agregar el siguiente código.

Class="titlezoom" title="Leyenda de tu imagen"

Aquí un ejemplo de como quedaría nuestro código bien implementado:

Imagen de Prueba " href="http://http://www.gadgets-blogger-gratis.blogspot.com/ http://1.bp.blogspot.com/-9_FfkLoLmmM/VA3f7auPK8I/AAAAAAAAEgI/Mgmu5M3nl2A/s1600/Animaci%C3%B3n%2BZoom%2BCSS%2Bcon%2Bleyenda%2Bpara%2Blas%2Bim%C3%A1genes.jpg " imageanchor="1" style="margin-left: 1em; margin-right: 1em;">http://1.bp.blogspot.com/-9_FfkLoLmmM/VA3f7auPK8I/AAAAAAAAEgI/Mgmu5M3nl2A/s1600/Animaci%C3%B3n%2BZoom%2BCSS%2Bcon%2Bleyenda%2Bpara%2Blas%2Bim%C3%A1genes.jpg" height="400" width="285" />

Lo que se encuentra en rojo es la leyenda que aparecerá en tu imagen, en azul se encuentran las url de las imágenes.

Si quieres recibir mas Gadgets, Widgets, Trucos y Tutoriales para blogger directamente por correo electrónico suscribete gratis a nuestro blog, visita nuestra página de facebook o añade nuestro feed Rss.


Sobre esta noticia

Autor:
Gadgetsblogger (180 noticias)
Fuente:
gadgets-blogger-gratis.blogspot.com
Visitas:
1363
Tipo:
Reportaje
Licencia:
Distribución gratuita
¿Problemas con esta noticia?
×
Denunciar esta noticia por

Denunciar

Comentarios

Aún no hay comentarios en esta noticia.