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


16 comentarios

La Casita Del Horror · agosto 8, 2012 a las 8:56 pm

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

    Juvinao · agosto 9, 2012 a las 7:19 pm

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

Paula Linares · agosto 10, 2012 a las 9:53 am

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

    Juvinao · agosto 10, 2012 a las 8:03 pm

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

    Paula Linares · agosto 12, 2012 a las 8:29 pm

    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

    Juvinao · agosto 14, 2012 a las 9:32 pm

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

    Paula Linares · agosto 15, 2012 a las 7:57 pm

    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/

Anonymous · agosto 10, 2012 a las 4:34 pm

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

    Juvinao · agosto 10, 2012 a las 8:19 pm

    Oye amigo tienes un blog muy bueno 😛

    Saludos y gracias por comentar

Jesús Checa · agosto 10, 2012 a las 5:37 pm

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?

    Juvinao · agosto 10, 2012 a las 8:26 pm

    Jesus que botones pusistes?

    Jesús Checa · agosto 10, 2012 a las 9:14 pm

    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 😀

    Juvinao · agosto 11, 2012 a las 8:15 pm

    Jesús pues entonces gracias por comentar :man:

porfirio pichilla · octubre 25, 2012 a las 2:26 am

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

    Juvinao · octubre 25, 2012 a las 4:03 pm

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

Sawyer James · enero 31, 2013 a las 3:44 am

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

Responder a Juvinao Cancelar la respuesta

Marcador de posición del avatar

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