Hola amigos de Mil Trucos Blogger, luego de pasar algunos días sin publicar un tutorial hoy volvemos al ruedo y en gran forma con un genial truco que consta de una espectacular animación para las imágenes, al pasar el cursor sobre la imagen se ejecuta un efecto zoom además de mostrarse una pequeña leyenda en la parte superior de la imagen.
El truco se ve de la siguiente manera:
Para agregar este truco a tu blog, debes ir a Diseño – Diseñador de plantilla – Avanzado – Añadir CSS, y allí agregas lo siguiente:
.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}
Ahora en la edición html de una entrada tendrás que agregar al código de la imagen lo siguiente:
class="titlezoom" title="Leyenda de tu imagen"
Quedando el HTML de una imagen como la siguiente:
<div class="separator" style="clear: both; text-align: center;">
<a class="titlezoom" title="Imagen de Prueba MilTrucos Bloger" href="http://www.miltrucosblogger.com/wp-content/uploads/2014/09/Animaci-C3-B3n-2BZoom-2BCSS-2Bcon-2Bleyenda-2Bpara-2Blas-2Bim-C3-A1genes.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.miltrucosblogger.com/wp-content/uploads/2014/09/Animaci-C3-B3n-2BZoom-2BCSS-2Bcon-2Bleyenda-2Bpara-2Blas-2Bim-C3-A1genes.jpg" height="400" width="285" /></a></div>
Siendo la parte resaltada en color azul lo que se ha agregado al código html de la imagen.
Espero que les haya gustado el tutorial y por favor no olvides compartir este post en tus redes sociales.
Vía/ Spiceupyourblog
4 comentarios
Anonymous · septiembre 9, 2014 a las 4:19 am
Me gustaria que nos indiques como configurar las descripciones e imagenes de los articulos de blogger para compartir en facebokk ..mil gracias de antemano
Anonymous · septiembre 9, 2014 a las 4:23 am
Me gustaria que nos enseñes como compartir los articulos e imagenes de blogger en facebook y que al compartir se muestre la descripcion del articulo..mil gracias !!
Efectos Hover para Imágenes - Hogar Bloguero · abril 11, 2015 a las 8:18 pm
[…] MilTrucosBlogger: Animación Zoom CSS con leyenda para las imágenes […]
Efectos Hover para Imágenes - Rocío Bloguera · enero 14, 2016 a las 6:41 pm
[…] MilTrucosBlogger: Animación Zoom CSS con leyenda para las imágenes […]