Vamos a darle un toque diferente a nuestros enlaces e imagenes utilizando CSS. Este efecto lo que hara es desplazar el enlace o imagen hacia la derecha al pasar el cursor por encima.
ejemplos
| enlace 1 enlace 2 enlace 3 enlace 4 enlace 5 |  |  |
Para añadir este efecto en nustro blog o web, primero ponemos el codigo CSS en nuestra plantilla antes de </body> y guardamos.
<style>.desplazamiento {-moz-transition: all 0.4s ease-out;-o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out;-ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }.desplazamiento:hover {margin-left: 25px;padding-left: 5px;}</style> |
Una vez hecho esto, cada vez que queramos mostrar un enlace, ponemos este codigo, modificando lo que esta en rojo:
<a class="desplazamiento" href="URL ENLACE">TEXTO</a> |
Y cada vez que queramos mostrar una imagen, ponemos esto:
<a class="desplazamiento" href="URL ENLACE"><img height="200" src="URL IMAGEN" width="200" /></a> |
