viernes, 13 de abril de 2012

Efecto Hover en fondo de imagenes personalizadas y Zoom


Este tuto fue a pedido de Nadia lo pondre porque es algo muy sencillito y me completa el post anterior de los bordes personalizados en imagenes xD asi que ahi va:

El efecto lo podran ver en mi blog de pruebas

de que trata este efecto?

muy sencillo de que el fondo cambie por otro cada que pasa el cursor sobre el.

ejemplo:




al pasar el cursor sobre el cambia el color de fondo asi:
es muy cute n.n


para tener este efecto has lo siguiente:

ve a diseno >> Edicion Html >> Editar plantilla

y buscar el siguiente codigo: ]]></b:skin>

cuando lo encuentres pega este codigo arriba de ]]></b:skin>
.post img {
margin: 5px;
padding: 20px;
background:url(URL DE TU IMAGEN O FONDO)repeat;
-moz-border-radius: 3em 1em;
}
.post img:hover {
background:url('URL DE TU IMAGEN O FONDO') 10px top repeat;
-moz-border-radius: 3em 1em;
}


asi quedaria:



y luego dar guardar ^^

ahora como dije en el post anterior si quieres que tus imagenes tengan borde como la imagen:


El codigo seria este:

.post img {
margin: 5px;
padding: 20px;
background:url(URL DE TU IMAGEN O FONDO)repeat;
-moz-border-radius: 3em 1em;
border: 1px dashed #BDBDBD;
}
.post img:hover {
background:url('URL DE TU IMAGEN O FONDO') 10px top repeat;
-moz-border-radius: 3em 1em;
border: 1px dashed #F6CEF5;
}


puedes cambiarle el color del borde.. al terminar das clic en GUARDAR.




OMGG no pense que se me haria tan largo hacer el tuto xD bueno ahora el segundo tuto que es el mismo efecto hover pero con zoom en las imagenes.

NOTA: como es el mismo efecto hover no pueden ir las 2 juntas okei? o eliges lo de los bordes personalizados o el efecto zoom (como vez yo puse un efecto en mi blog de pruebas y el otro lo tengo en este blog xD) espero hacerme entender ^^

El ejemplo del efecto ZOOM lo pueden ver en este blog al pasar el cursor sobre el la imagen se hace un poco mas grande seguramente ya lo ha visto pero igual pondre una imagen aqui =P


pasa el cursor sobre ella



si quieres este efecto sigue los siguientes pasitos.

para tener este efecto has lo siguiente:

ve a diseno >> Edicion Html >> Editar plantilla

y buscar el siguiente codigo: ]]></b:skin>

cuando lo encuentres pega este codigo arriba de ]]></b:skin>
.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.9; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}


quedando asi:



ya solo das a guardar y listo


me regalas un comentario?


13 comentarios:

  1. Annyz esta entrada esta super interesante, yo hice el otro y me quedo muy chulo, cuando me canse del otro haré este, pero esta muy bien me encanta como lo explicas, antes era una inútil al principio con mi blog, pero gracias a ti, estoy orgullosa de mi blog.
    Muchas gracias de verdad siempre que me piden ayuda mis seguidores sobre diseños y cosas chulas para el blog, les doy tu blog para que te sigan y sepan hacer cosas en sus blogs.
    Bueno, me gustaria saber si tienes algun tuto sobre como hacer una scroll bar en el blog, creo que se llama asi, seria hacerla personalizada, con la imagen del fondo en url y la cosa que sube y baja tambien otro url, yo tengo en mi blog uno, y me gusta, pero vi en otros blogs scroll bars como con bordes y se ven preciosas, soy una antojona, pero si me dijeras donde puedo enocontrar la pagina para hacerlo o le hicieras tu el tutorial cuando puedas o si ya le tienes echo que me lo informes y me pongas el link porfis jaja :)
    besos y sigue asi :) Sandra

    ResponderEliminar
  2. mil gracias por el tuto, ya queria yo saber como se lograban estos efectos :3

    ResponderEliminar
  3. Hi! Olaa annzy m encanta tu blog pero sigo sin saber como se hace TT^TT podrias poner un videoo! pliss

    ResponderEliminar
  4. hola SANDRITA:

    si tengo un tuto sobreel scroll bar en pocos dias lo pondre por aqui espero te agrade y te sea de ayuda ^^

    ResponderEliminar
  5. mini marta:

    sorry martita pero no hago videos u.u solo copia el codigo y pegalo arriba de ]]skin como muestro en la imagen

    ResponderEliminar
  6. te adorooooo siempre on aportazos! sinceramente no se que haria si se te ocurriera dejar de actualizar o cerrar el blog, muchas gracias por todos tus aportes!

    ResponderEliminar
  7. annyz me surgio una duda, como puedo poner un borde para todas mis imagenes??? pero solo el bordeee??

    ResponderEliminar
  8. ah mi niña el la entrada de abajo salia gomme el spam xD

    ResponderEliminar
  9. Holaaa Annyz! sabes como puedo hacer girar una imagen de gadget? me copa el efecto esta buenísimo y me gustaría usarlo en una imagen en mi blog

    ResponderEliminar
  10. mm como el tuto que gira las imagenes?? si se puede hacerlo en los gadgets peroooo se moverian todas las imagenes que tengas en todos los gadgets o.o no importa?

    ResponderEliminar
  11. ufa! yo sólo quería que se mueva una sóla imagen de gadget.... no podré hacerlo entonces! gracias annyz! besoo!!!

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.