Bienvenida

BIENVENIDO A FAMAG KIRADOBER,

Ultimas Entradas

Enlaces e imagenes con efecto desplazamiento

by - lunes, enero 23, 2017

Enlaces e imagenes con efecto desplazamiento



todovideokiko
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.
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>


Y cada vez que queramos mostrar un Texto ponemos esto:

<a class="desplazamiento" href="URL ENLACE">TEXTO</a>

Aqui cambias la URL que quieras enlazar y el Texto que quieras que se use para el enlace.

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>

Esto es todo solo teneis que cambiar las URL del enlace y de la imagen por la que les corresponda y a tirar millas.


Fuente; 

Fecha:23/01/2017

Publicado por: 







Tags : , , ,

You May Also Like

0 comentarios

Paginacion

Created with by ThemeXpose