Efecto pushbutton en las imágenes

28 de diciembre de 2009 101 comentarios ,
El efecto pushbutton es el efecto que se le da a un elemento que simula un botón presionándose, en otras palabras, el elemento da la ilusión de tener un hundimiento cuando se hace click sobre él o cuando pasamos el cursor encima.




El código para este efecto es de lo más sencillo, sólo hay que entrar en Plantilla | Edición de HTML y antes de ]]></b:skin> pegar lo siguiente:
.post img:hover {
position: relative;
top: 1px;
left: 1px;
}

Y listo, así se simple las imágenes de las entradas tendrán este efecto al pasar el cursor sobre ellas.
Si deseas que el efecto pushbutton se aplique a todas las imágenes del blog, entonces pégamos este código en lugar del anterior:
img:hover {
position: relative;
top: 1px;
left: 1px;
}

Si quisieras que el efecto sólo se aplique a las imágenes que tú elijas, entonces omitimos esos códigos y pegamos este:
.pushbutton:hover {
position: relative;
top: 1px;
left: 1px;
}

Y luego cuando quieras que una imagen tenga el efecto pushbutton usas este código:
<img class="pushbutton" src="URL de la imagen" />

Sólo cambia la URL de la imagen y listo. Esa imagen tendrá el efecto pero las demás no.


101 comentarios en:

" Efecto pushbutton en las imágenes "

  1. Muy bueno....

    Como siempre muy novedoso,

    Muchas Gracias...

    ResponderEliminar
  2. Wow, es genial.
    Ahora que veo la imagen quiziera preguntarte ¿Como haces las imagenes PNG?

    ResponderEliminar
  3. UFE-Activo, qué bueno que te ha gustado =)

    Descargar en Español, gracias a ti por tu visita.

    El Venado, la imagen de ejemplo no está en PNG sino en JPG. Pero cualquiera de las dos las hago en Photoshop.

    ResponderEliminar
  4. hola potro, esta muy bueno el efecto, y la imagen tambien.
    Saludos!

    ResponderEliminar
  5. felizzz navidaddd, re tarde un poco mas y casi te saludo para año nuevo xD jajajaja

    muchas gracias por la ayuda que nos brindas siempree

    saludoss

    ResponderEliminar
  6. Me gusta el botón ese, te quedó muy bueno... Saludos y genial herramienta... Mañana voy a publicar una entrada más didactica en mi blog, jeje, para usar el mover un botón, jaja, un saludo!

    ResponderEliminar
  7. Hola POTRO que tal me fascino este truco de verdad es lo mejor
    y lo mejor es que voy a crear una web .com, y necesito de mucha gente estas interesado, si estas interesado pues abres el link de mas abajo y lo checas, es un documento de TXT trae mas detalles, vas a ganar una buena lana men, es algo de escribir tu opinion.
    Pero espero contar contigo vale
    no me falles
    Bueno entra aqui y checa mas detalles
    http://dl.dropbox.com/u/3254711/Other/Sistema%20de%20Nuevo%20Ingreso%20a%20Web.txt

    ResponderEliminar
  8. PepeX, qué bueno que te ha gustado.

    Ezequiel, igualmente, que tengas un excelente año nuevo!

    Ascesino96, mañana que me doy una vuelta en tu blog para ver cómo quedó.

    Alex, al rato lo checo para ver de qué se trata, saludos.

    ResponderEliminar
  9. Hola, pase para darte las gracias por todo tu apoyo y conocimientos que me has brindado durante el año, asi como desearte mucha felicidad y mis mejores deseos para el 2010, un fuerte abrazo

    ResponderEliminar
  10. Hola DE INTERES,

    Muchas gracias por tus palabras. Que tus deseos se vean multiplicados hacia ti y tus seres queridos.

    Mucho éxito en el 2010.
    Un abrazo!

    ResponderEliminar
  11. Potro, me vine hasta acá para desearte que tengas un Feliz Año Nuevo !! Que se cumpla todo lo que desees en este próximo 2010 :)

    Del post: no veo el efecto con este "carro viejo" que tengo por PC :( (buaaaaaaaa) No importa, lo hice igual en el blog de prueba, algún día lo veré en otra PC... se la voy a pedir a los Reyes Magos jajajajaja

    Besotes !!!

    ResponderEliminar
  12. Hola Maria Rosa,

    De hecho me sorprende que ese ordenador aun encienda, jajaja. Eres una excelente persona y la labor de tu blog es muy noble, estoy seguro que los Reyes Magos te traerán algo.
    Que tengas un excelente año nuevo y que esté lleno de éxitos y bendiciones para ti y tu familia.

    Besos!

    ResponderEliminar
  13. Eso era Todo
    Bien el poTro
    eso me funcionara para mis botones de descarga
    salud2
    unrealmat

    ResponderEliminar
  14. En los botones de descarga siempre queda muy bien el efecto.
    Saludos!

    ResponderEliminar
  15. Hola potro, y que parte de img class="pushbutton" src="URL de la imagen" habría que cambiarle para que ademas del efecto optico de boton, ademas condusca a una descarga ? es decir, que un boton que ya tengo con una imagen (que al darle click va a la dirección de la descarga) tenga este efecto

    ResponderEliminar
  16. Hola Juan Carlos Agudelo,

    Sería encerrar el código de la imagen con el código del enlace, es decir, así:

    <a href="URL del enlace"><img class="pushbutton" src="URL de la imagen" /></a>

    Cambia la URL del enlace que es el de la descarga y la URL de la imagen de tu botón.

    Saludos.

    ResponderEliminar
  17. potro como se le hace para que solo tenga este efecto en la pagina principal y en las entradas individuales.

    ResponderEliminar
  18. Hola cargohe,

    Para que tenga el efecto en las entradas individuales y en la página principal usa el primer código.

    Saludos.

    ResponderEliminar
  19. potro solo quiero el efecto solo en la página principal, en las individuales no, como le hago.Gracias

    ResponderEliminar
  20. Hola cargohe,

    Pega antes de </head> lo siguiente:

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .post img:hover {
    position: relative;
    top: 1px;
    left: 1px;
    }
    </style>
    </b:if>

    Con eso el efecto sólo se verá en la página principal.
    Saludos.

    ResponderEliminar
  21. Padrisimo le quedo bien a mi blog... mil gracias...

    ResponderEliminar
  22. Hola, Potro! Exclente, como siempre. Gracias! Lo puse en un blog nuevo que estoy armando y me encantó cómo quedó. Le puse el primer código, el que solo es para las entradas.
    He visto un efecto similar con los links escritos, que se mueven, como si uno los estuviera presionando. Quisiera saber cómo hacerlo (si es que es tan sencillo como esto que nos enseñaste aquí y no resulta muy complicado).
    Es que la plantilla base que estoy usando en ese blog nuevo es una de las clásicas de blogger (la Stretch Denim); aunque ya la he modificado un poco y le he añadido botones de menú arriba y algunas otras cosas más que no tenía (que he tomado de otras plantillas y se las he incrustado acá); y también otras cosas que he tomado de lo que nos enseñas en Ciudad Blogger.
    Pero esa plantilla clásica no trae hover en los links y me gustaría que cambiaran de color al pasar sobre ellos (en todo el blog) y, si se puede, que tuvieran el efecto este de push bottom. Pero por mucho que he tratado, no consigo aún ponerle ningún hover. Creo que no lo estoy colocando en el lugar correcto de la plantilla.
    ¿Podrías orientarme, por favor, si no es mucha molestia?
    Te agradezco de antemano toda tu atención.
    Muchas gracias.

    ResponderEliminar
  23. P.D. Ah, en el post-footer de mi blog, los links sí tienen hover (pero es que yo tomé en bloque ese pedazo entero, de otra plantilla y se lo incrusté acá). Pero en realidad, no sé bien cómo poner, partiendo de cero, un hover en los links. Gracias.

    ResponderEliminar
  24. Hola Vicky,

    No es ninguna molestia. Puedes ponerlo en la plantilla directamente, sólo pega debajo de:
    a img {
    border-width: 0;
    }

    Lo siguiente:

    a:hover {
    position: relative;
    top: 1px;
    left: 1px;
    }

    Con eso los enlaces tendrán el efecto pushbutton, ahí mismo puedes agregarle otros estilos como color, etc.

    Saludos.

    ResponderEliminar
  25. Mil gracias, Potro! Mejor dicho, un millón de gracias! Eso era justo lo que quería. Puse el código tal como me indicaste y todo resultó perfecto. Además, le agregué también color, como me sugeriste. Gracias de nuevo.

    ResponderEliminar
  26. Perfecto! Incluso tu idea de poner este efecto a los enlaces me ha llamado mucho la atención, probaré en este blog ponerlo a ver qué tal se ve aquí.

    Un abrazo!

    ResponderEliminar
  27. Hola El Potro, te queria consultar, estoy usando el efecto pushbutton en algunas imagenes no en todas, pero tenes idea de porque me funciona en Internet Explorer y en Google Chrome o Firefox no se ve?
    Gracias!

    ResponderEliminar
  28. Debería de verse en todos los navegadores, incluso esta página que tiene el efecto pushbutton se ve sin problemas en todos los navegadores, por lo cual me haría pensar que debe tratarse de tu plantilla, quizá tenga una condicional para Internet Explorer o Mozilla con el cual interfiere con este efecto.
    Saludos.

    ResponderEliminar
  29. Exacto, es lo que me llama la atencion.
    Me podrias decir como ubicarlo?

    http://panoramicadelobservador.blogspot.com

    ResponderEliminar
  30. Te mentiría si te digo cuál es la propiedad que lo causa, de condicionales para navegadores sé muy pero muy poco :(

    ResponderEliminar
  31. No del todo, ya encontré el problema.
    Resulta que en los estilos del efecto pushbutton tienes esta anotación:

    <!-- EFECTO PUSHBUTTON EN IMAGENES A ELECCION -->

    Ese es el problema, cuando las anotaciones van antes de ]]></b:skin> no se usan así las anotaciones, sino así:

    /* -- EFECTO PUSHBUTTON EN IMAGENES A ELECCION -- */

    La anotación que tú pusiste sólo se usa cuando el código va después de ]]></b:skin>

    Elimina la anotación o cámbiala por la que te he mencionado y verás que funciona.

    Saludos.

    ResponderEliminar
  32. Noo!! Increíble!!
    Como a veces se hacen las cosas bien y este tipo de tonterías, como la mía, te pueden complicar la historia!
    y ustéd Potro lo resolvió con tanto buen ojo!
    Yo me volvía loco, fijando el seteo de los navegadores y ya me estaba resignando.
    Muchísimas gracias,
    Siéntase orgulloso, continuará perteneciendo a mis blogs recomendados.

    Un abrazo!

    ResponderEliminar
  33. Pareciera que no pero de repente un descuido como ese nos puede volver locos por días sin dar con la respuesta. En fin, qué bueno que ya está resulto tu problema.

    Gracias por tenerme como un blog recomendado.
    Saludos.

    ResponderEliminar
  34. hola gracias me sirvio de mucho tu blog.
    yo me estoy haciendo uno y quiero ponerle cosas nuevas .para el que quiera visitarlo (vendo fragancias alternativas por mayor y hice un blog para que la gente conosca las fragancias................muchas graciassss

    ResponderEliminar
  35. Hola Natalia Zana,

    Qué bueno que te ha sido de utilidad este sitio.
    Mucha suerte con tu blog y con tus fragancias!

    Saludos.

    ResponderEliminar
  36. Wow, mil gracias ésto era justo lo ke andaba buskando, me has sido de gran ayuda hoy y desde el inicio de mi blog.

    Un abrazo :)

    ResponderEliminar
  37. Qué bueno que has podido encontrar en este sitio temas útiles para ti.
    Un abrazo!

    ResponderEliminar
  38. Hoooola
    No pude? crees que sea una incompatibilidad de jQuery y scriptacolous o que sera que no me da?
    Gracias

    ResponderEliminar
  39. Nop, este "truco" no usa scripts así que no interfiere con los scripts que uses.
    Al parecer es porque un poco más arriba del código que pusiste tienes estas líneas de comentarios:

    <!--fin post recomendados-->

    Esas líneas de comentarios sólo se usan así cuando están antes de </head>
    Cuando los comentarios se ponen antes de ]]></b:skin> entonces van así:

    /* comentario */

    Cambia esos comentarios que tienes antes de ]]></b:skin> por la otra forma que te he mencionado.

    Saludos.

    ResponderEliminar
  40. hoooola espero andes Super, y ya te ayas puesto el tatuaje I love mom, jojo broma, no pasando a temas mas seriO
    s me puedes ayudar a ponerselo a mi imagen de cabecera porfa
    Muchas GRACIAS

    ResponderEliminar
  41. A ver si esto funciona, busca esta línea:
    #header img {

    Debajo de ella agrega esto:
    position: relative;
    top: 1px;
    left: 1px;

    Y del tatuaje...ya veré ;)

    ResponderEliminar
  42. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  43. este truco me ha ido de maravilla ^^
    lo eh añadido al menú de mi blog,asi queda mas original jejeje le cambie los valores de left y top para que quedase a mi gusto ^^
    muchas gracias =)
    facil y útil

    puedes ver como me quedó ^^ http://kingdomheartszone.blogspot.com
    ah,oye una cosita...y no seria posible que en vez de que se desplace de golpe,se desplace poco a poco?

    ResponderEliminar
  44. Quizá con algún script pero por el momento no conozco uno que lo haga, aunque es mejor sin script así la plantilla no se vuelve tan pesada.

    Saludos!

    ResponderEliminar
  45. Hola Potro
    Quisiera saber como ponerle este efecto a los titulos de las entradas nada mas Gracias
    Saludos...

    ResponderEliminar
  46. En la mayoría de las plantillas se pone el código debajo de:
    .post h3 a {

    Saludos.

    ResponderEliminar
  47. Hola potro, tengo un problemilla. Me gustaria poner este efecto en unas imágenes que están en la barra de los gagets. La imagenes las subí de mi ordenador. Puse la primera parte, para hacer el efecto solo en algunas imágenes, pero no encuentro donde tengo que poner lo de la imagen y la URL. Soy bastante novatilla. Acabo de empezar con esto de los blogs. Se trata del blog de mi cole. Te dejo la dirección por si quieres echar un vistazo:
    http://marzán infantil.blogspot.com
    es muy, muy, pero que muy sencillito....
    Gracias por todo.

    ResponderEliminar
  48. Hola,

    Necesitarías poner la imagen no dentro del gadget de imagen sino en el gadget HTML/Javascript.
    Es más o menos igual, entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript.

    Ahí pega el último código que se menciona en la entrada, donde dice URL de la imagen deberás poner la dirección Web de la imagen que tienes.
    Para saber la URL de esas imágenes que ya subiste sólo dale click con el botón derecho y selecciona una opción que diga algo como "Copiar URL de la imagen".

    Saludos.

    ResponderEliminar
  49. Buenas! he estado intentando agregar este efecto a los botones de suscripcion de mi pagina pero no consigo que salga el efecto.


    ¿Podrias echarme un cable?

    gracias!

    http://cineconclick.blogspot.com/

    ResponderEliminar
  50. Hola moenone,

    Necesitaría que tengas puesto todo el código que se menciona para poder ver dónde puede estar la falla.

    ResponderEliminar
  51. Ok, ya lo he metido.



    Porcierto, ¿se podria hacer que los botones se adaptaran al tamaño de la pagina? es decir que cuando aumenente el zoom en mi explorador los botones lo hagan tambien.

    gracias!

    ResponderEliminar
  52. Lo que sucede es que cuando has puesto el primer código has eliminado por error el cierre del código que estaba arriba de él y eso ha hecho que no funcione.
    Lo tienes de esta manera:

    #tabsF a:hover span {
    background-position:100% -42px;

    .pushbutton:hover {
    position: relative;
    top: 1px;
    left: 1px;
    }

    Si te fijas eso que está en negrita le has quitado la llave de cierre }
    Es necesario que no elimines nada y que todo esté colocado de forma correcta.
    Debe quedar así:

    #tabsF a:hover span {
    background-position:100% -42px;
    }
    .pushbutton:hover {
    position: relative;
    top: 1px;
    left: 1px;
    }

    ResponderEliminar
  53. Genial potro!! muchisimas gracias, ademas de paso me as resuelto otro problemilla

    ResponderEliminar
  54. Precioso efecto Potro como siempre eh, nosotros lo aplicamos y le cambiamos el efecto de posición lo alineamos a right en vez de left y le aumentamos a 5 px cada uno es decir el top y el right y ha quedado excelente, lo puedes ver en nuestro blog www.exajutiapa.blogspot.com en las latas de soda para redes sociales jejeje, saludos desde Jutiapa, Guatemala.

    ResponderEliminar
  55. Gracias Potro, saludos como siempre, una pregunta más fijate que ultimamente tenemos problemas para guardar cualquier gadget con Google Chrome, al inicio no tenia problemas y despues vimos que no nos funcionaba el boton de guardar, solo ese no s da problema, es decir queremos modificar algo en nuestros widjets si podemos modificarlo pero no podemos guardarlo, solo con IE, ya desinstalamos Chrome y continua el problema creo que es problema con Java ya que esos botones funcionan con Java creo, a lo mejor sepas de algo te lo agradecería.

    PD. Este problema nos lo dió ultimamente Chrome al inicio no.

    ResponderEliminar
  56. Parece ser un problema regular pues últimamente han sido varios usuarios los que han comentado el mismo conflicto que mencionas. Es probable que sea un problema tanto de Chrome como de alguna compatibilidad de ese navegador con Blogger. Si es así entonces no queda más que esperar a que alguno de ellos dos solucione el problema.

    ResponderEliminar
  57. Bueno pues ni modo a esperar se ha dicho jejejeje, gracias como siempre Potro y te cuento que mejor quitamos el efecto pushbuttom porque nos causo conflicto al hacer clic sobre ellos no nos redireccionaba a donde queríamos, si veiamos el efecto pero no hacia la funcion que queríamos, no se a que se deba.

    ResponderEliminar
  58. potroo no entiendo porque no me funciona lo puse en una plantilla y me funciono de maravilla pero en esta no http://dagamusic2.blogspot.com/ me podrias decir que pasa porfavor

    ResponderEliminar
  59. otra pregunta potro ahi en este mismo blog http://dagamusic2.blogspot.com/
    abajo del menu tengo un gaget con unas imagnes en movimento estilo marquee veo que le puedo poner un background: negro pero no puedo poner una imagenen sabes de alguna forma que pueda?

    ResponderEliminar
  60. No veo que hayas puesto los códigos en esa plantilla.
    Para lo otro encierra el código que quieres dentro de <div style="background:url(URL de la imagen);"> y </div>

    ResponderEliminar
  61. si man asi lo tengo

    .pushbutton:hover {
    position: relative;
    top: 1px;
    left: 1px;
    }

    ]]>

    no me funciona nada

    y muchas gracias por lo del background lo intentare ^^

    ResponderEliminar
  62. Debes quitar la línea de arriba que pusiste:
    <!-- Fin Paginación -->

    Esas sólo se usan si es algo que está dentro de <body> o antes de </head> pero no antes de los estilos, de lo contrario los inhabilita.

    ResponderEliminar
  63. muchas gracias todo me funciono perfecto!!! ^^

    ResponderEliminar
  64. Buenas Potro, queria saber si escogiendo la opcion de que solo algunas fotos agan el efecto, se podria poner un sonido para que suene al pasar el cursor.

    Gracias y un saludo.

    ResponderEliminar
  65. Hay una entrada de Vagabundia donde hablan sobre el tema de los sonidos en los enlaces, no lo he probado pero quizá te sirva:
    http://vagabundia.blogspot.com/2011/05/socorro-sonidos-en-cualquier-parte.html

    ResponderEliminar
  66. Perfecto el efecto.. pero no me funciona *CRY*

    este es mi codigo :

    https://docs.google.com/document/pub?id=1o2nRXL5bWvmmBQCBHzj-gI81E6HzX_827-hdh6y18CE


    y mi blog es http://espacio846.blogspot.com/


    no se por que cheque mil veces el codigo

    ResponderEliminar
  67. Hola bryan846,

    Lo que pasa es que un poco arriba de ese código tienes un código sin la llave de cierre, eso ha hecho que todo lo que haya debajo de ese error no funcione:

    .blog-author-comment p {
    margin:0 0 .75em;
    padding:5px 10px;
    border-bottom: 1px solid #696969;
    border-top: 2px double #CDC9C9;
    border-left: 1px dotted #ccc;
    border-right: 1px dotted #ccc;
    background:#CDC9C9;
    .CommentIndex{
    float:right;
    position:relative;top:25px;left:3px;
    margin-left:-200px;
    font: italic bold 30pt 'Century Gothic','Trebuchet MS';
    color:red;
    opacity:0.3;
    -moz-opacity:0.3;
    filter:alpha(Opacity=30);
    }

    ResponderEliminar
  68. ya lo corregi, funciona perfecto, gracias otra vez

    ResponderEliminar
  69. Consulta!... yo le tengo en "leer mas" una imagen y a esa imagen me gustaria darle este efecto, intente pero no pude... ayuda porfa!!

    ResponderEliminar
  70. http://vivoyenllamas.blogspot.com/ mi blog para que le heches una miradita! :D

    ResponderEliminar
  71. Pues igual, sólo es buscar el código de la imagen y meter ahí la clase que le da el efecto:

    <img class="pushbutton" src='http://www.fileden.com/files/2011/7/25/3172693//Logo 2.0.JPG'/>

    ResponderEliminar
  72. http://maxima-imusic.blogspot.com/

    ResponderEliminar
  73. sii!!! queda genial!!
    es horrible tener las imagenes super estaticas...
    gracias!!!!!!!

    ResponderEliminar
  74. Hola Potro, debo confesar que esta vez me enrede con la opción de poner las imagenes estilo botón. Me queda claro hasta el punto que debo modificar la plantilla usando el penúltimo código, que me va a permitir elegir la imagen para darle el efecto. Pero el último código se pega en la edición html de la plantilla??
    En mi blog (página inicio) tenía un botón que llevaba a otro blog, pero dejó de funcionar y lo eliminé. Al querer aplicar la opción de pushbutton a un gadget en el diseño ¿cuál debo seleccionar? ¿gadget html/java o el gadget imagen?...me enredé con las opciones...pero sólo quiero crear un botón en la página principal como enlace a otra web. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Sandra. El último código va donde tengas tu imagen y puedas ver su código, ya sea una entrada, o un gadget HTML/Javascript.
      Saludos.

      Eliminar
  75. Hola Potro, tengo una duda,
    ¿No se podría aplicar este mismo efecto, pero al hacer click en la imagen?

    ResponderEliminar
    Respuestas
    1. No se apreciaría, porque inmediatamente se abre el enlace, es por eso que se pone al pasar el cursor.

      Eliminar
  76. Ahí en la entrada se menciona cómo aplicarlo sólo a los elementos que tú elijas.

    ResponderEliminar
  77. como puedo hacer para utilizar este codigo:
    * img class="pushbutton" src="URL de la imagen" *
    pero en una imagen incluida como gadget?
    gracias.

    ResponderEliminar
    Respuestas
    1. Así:

      <img class="pushbutton" expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>

      Eliminar
    2. No encuentro el codigo con control F ]]> en el nuevo html de blogger, me puedes echar una mano?. No se en que pestaña buscar. Gracias

      Eliminar
    3. Gracias por el post, Potro. Tengo una duda. Les he aplicado el efecto a todas las imágenes de los mensajes a la vez pero hay una a la que se lo quiero quitar. ¿Cómo se haría? La otra opción es solo ponerle el efecto a las demás una por una pero es que son más de 130 así que, de momento, lo descarto...

      Eliminar
    4. Da click en la flechita que está junto a <b:skin>...</b:skin> ahí lo encontrarás.

      Eliminar
    5. Hola Asier Ruiz, si quieres que una imagen no lo tenga pon estos estilos:

      .nopushbutton:hover {
      position: relative;
      top: 0 !important;
      left: 0! important;
      }

      Y luego cuando quieras que una imagen NO tenga el efecto pushbutton usas este código:
      <img class="nopushbutton" src="URL de la imagen" />

      Eliminar
    6. Muchísimas gracias por responder, Potro. Escribí hará meses sin esperanza de que respondieras porque sabía que andabas sin tiempo para responder a los mensajes del blog. Era posiblemente la última cosa del blog que no estaba como yo quería. No sabes cuánto te agradezco tu ayuda. Casi todas las mejoras que hice en mi blog las saqué de aquí. ¡Eres el mejor!

      Eliminar
    7. Gracias Asier, me da gusto que hayas resuelto el último retoque de tu blog. Siento haber demorado tanto, pero ya sabes lo que dicen, más vale tarde que nunca :)

      Eliminar
  78. Hola esta muy bueno este efecto pero desde que lo puse los botones de ir arriba e ir abajo cuando les pao el mouse por encima se desaparecen y aparecen del otro lado de la pantalla y ya le puse eso de excluir a la imagen pero ahora reaparecen del otro lado pero arriba ayudame por favor este es mi blog: http://foufouatelier.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola, aplícalo sólo a las imágenes del post y no a todas las imágenes del blog.

      Eliminar
    2. muchas gracias por responder pero lo hice y sigue igual

      Eliminar
    3. Bueno, según veo en tu código fuente el problema no es lo que has aplicado de esta entrada, sino de los estilos que le aplicaste a tus botones. A ellos les añadiste la clase nopushbutton y si miras los estilos al pasar el cursor (.nopushbutton:hover) verás que ahí has declarado que el top sea 0 y que en lugar de right sea left.

      Eliminar
    4. Muchas gracias ahi lo acomode pero de otra forma, le borré el top:0 y le puse right en ves de left y tambien en position le puse fixed

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger