Mil Trucos Blogger

Imagenes con efecto Zoom en Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

En esta oportunidad les compartire un gran truco en el cual las imagenes del blog quedan con un genial efecto zoom al pasar el cursor sobre ellas, este genial truco se logra mediante CSS.

Aqui puedes ver una vista previa del truco.


Para agregar este truco pega el siguiente CSS antes de ]]></b:skin> :

/* Contenedor general y reset de margin y padding */
.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que podría haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:32px; /* Ancho inicial imagénes. 50% real */
height:32px; /* Alto inicial imagénes. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

En el anterior codigo vienen incluidas algunas lineas para explicar un poco el contenido del CSS.

Ahora agrega el siguiente HTML en la parte que quieras (puede ser un elemento HTML/JavaScript)

<div class=”expandir”>
<ul>
<li><a href=”URL_Destino1“><img src=”IMAGEN1“/><span>TEXTO1</span></a></li>
<li><a href=”URL_Destino2“><img src=”IMAGEN2“/><span>TEXTO2</span></a></li>
<li><a href=”URL_Destino3“><img src=”IMAGEN3“/><span>TEXTO3</span></a></li>
</ul>
</div>

Lo que se indica en verde corresponde a la URL del destino,a la URL de la imagen y el texto a mostrar.

Para agregar otras imagenes solo debes añadir la siguiente estructura (antes de </ul>)  :

 <li><a href=”URL_Destino“><img src=”IMAGEN“/><span>TEXTO</span></a></li>

Espero que les haya sido de utilidad este truco y sigan visitando Mil Trucos Blogger.

Via/Oloblogger

0
Shares
Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

16 Comentarios

  1. agosto 8, 2012    

    muy bueno juvinao,hace poco descubri tu blog y esta muy bueno,tiene muchas cosas interesantes que me hicieron utiles..te agrego a Blog Recomendados

    • agosto 9, 2012    

      Gracias amigo por tu comentario y me alegra mucho que hayas agregado mi blog en Recomendados,Saludos “La Casita Del Horror” :man:

  2. agosto 10, 2012    

    HOla

    Quiero crear albunes de fotos en una pagina, eso se puede hacer en blogger.

    Tengo las paginas y en una pone fotos y yo quiero que al pinchar me salgan albunes.

    Gracias

    • agosto 10, 2012    

      Paula claro que se puede hacer pero describeme un poco mas como lo quieres…

    • agosto 12, 2012    

      Pues en el blog tengo paginas y en una pone “fotos” y al darle me salen todas las fotos, una debajo de la otra. Yo lo que quiero es que al darle puedan aparecer albunes. No se si me explico. Te dejo el blog.

      paulilinares.blogspot.com

    • agosto 14, 2012    

      Paula creo que ya te entiendo,si gustas con algo de tiempo te hago un tutorial en una entrada 😛

    • agosto 15, 2012    

      Gracias, el otro día buscando encontré que podía a través de picassa y lo hice jiji.

      No se si habías visto este contador de visitas, te dejo el enlace:

      chrome://newtabhttp//feedjit.com/freeLiveTrafficFeed/

  3. Anonymous Anonymous
    agosto 10, 2012    

    hola llevo tiempo siguiendo tu blog, me gustaria que cuando tengas tiempo te pases por mi blog y me des tu opinion http://hoywtf.blogspot.com

    • agosto 10, 2012    

      Oye amigo tienes un blog muy bueno 😛

      Saludos y gracias por comentar

  4. agosto 10, 2012    

    Gracias Juvinao, acabo de descubrir tu blog, y me vienen genial todas tus explicaciones.

    Solo una duda en cuanto a esto, he puesto un botón para Facebook y otro para Twitter. Pero las imágenes no me salen tumbadas y encima de la imagen de twitter me aparecen unos puntos suspensivos 🙁

    ¿Sabrías que puedo hacer?

    • agosto 10, 2012    

      Jesus que botones pusistes?

    • agosto 10, 2012    

      Puse un par de iconos de facebook y de twitter que encontré en google, probé con otros y seguían saliendo los puntos suspensivos. Pero no te preocupes, he decidido hacer otra cosa.

      Muchas gracias 😀

    • agosto 11, 2012    

      Jesús pues entonces gracias por comentar :man:

  5. octubre 25, 2012    

    xd soy un principiante xd casi no me salen esque me confunden eso de las CSS xd nose si hay q ponerlo en gadget de hotml xd ayuda porfa

    • octubre 25, 2012    

      Debes entrar en la Edicion HTML de tu blog y agregar el CSS arriba de la etiqueta que dice la entrada.

  6. enero 31, 2013    

    oye man puse este efecto en mi blog con imagenes en las entradas, pero quedaron pegadas todoas, como podria separarlas? saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo