Holaa chiics como es prometi, les dejare el tutorial sobre como hacer este efecto , miren este blog : Daily Visuals ♥ (xd por sierto visitenlo es mio) y miren el efecto que tiene en las imagenes y en el blockquote (se mueve por detras) bueno se los enseñare para colocarlo en layout personalizado , es facil con un codigo especial ;)
Bueno, empezamos. Buscan esta parte de su code:
/* Imágenes}
----------------------------------------------- */
a img {
background-image: url(http://i46.tinypic.com/9u2elg.png);
padding: 5px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #ffffff;
opacity:.72;
filter: alpha(opacity=72);
}
a:hover img {
background: url(http://i45.tinypic.com/zmxpqs.png);
padding: 7px;
box-shadow: #FFFFFF 0px 0px 8px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 4px 4px 4px 4px;
opacity:.99;
filter: alpha(opacity=99);
border: 1px solid #ffffff;
donde dice "a:hover img{" abajo de todo lo que tiene pegan el siguiente codigo
-webkit-transition: background-position 2s;
-moz-transition: background-position 2s;
-o-transition: background-position 2s;
-ms-transition: background-position 2s;
transition: background-position 2s;
background-position: center;y ustedes ahi le cambian si quieren que el movimiento dure mas segundos...etc...
entonces quedara asi
/* Imágenes}
----------------------------------------------- */
a img {
background-image: url(http://i46.tinypic.com/9u2elg.png);
padding: 5px;
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #ffffff;
opacity:.72;
filter: alpha(opacity=72);
}
a:hover img {
background: url(http://i45.tinypic.com/zmxpqs.png);
padding: 7px;
box-shadow: #FFFFFF 0px 0px 8px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 4px 4px 4px 4px;
opacity:.99;
filter: alpha(opacity=99);
border: 1px solid #ffffff;
-webkit-transition: background-position 2s;
-moz-transition: background-position 2s;
-o-transition: background-position 2s;
-ms-transition: background-position 2s;
transition: background-position 2s;
background-position: center;
Espero que les halla gustaadoo :* ♥ Muchoos besos ! espero que lo coloqeen ;)
Valee amor como se hace para poner en mi blog mi boton de creditos¿?
ResponderEliminarokey :)
ResponderEliminaro si no ponme de admin en el blog y yo te hago todas las configuraciones y si no lo deseas asi ps lo unico que te puede ayudar es buscar tutoriales ;) asi aprendii yo xd el unico sidebar que no podras llenar de widgets es seguidores porque como es layout personalizado es dificil encontrar el mismo widget en html :s de resto los otros si se pueden !
EliminarValeee :) me harías un gran favor con eso
EliminarHola!!!
ResponderEliminarMe gustaria afiliarte para salir en tu elite y yo en la tuya mi blog s este:
http://loveditions.blogspot.com.es/
Contestame por un coment en mi blog!
Holi :3 Tengo un problema, no me encuentra el código...¿Lo busco en edición HTML? Gracias ^^
ResponderEliminarSí, en edición HTML, dónde más? xD Tienes que buscar esto: a img {, lo de a:hover img{ no creo que este, agregalo (:
EliminarNo me funciona, porque en mi código no me encuentra nada... :S
ResponderEliminar