Para darle un efecto original a nuestros iconos sociales, o, simplemente a una imagen, aplicaremos CSS con JQuery. Este efecto hace que al pasar el cursor por encima la imagen suba y al retirar el cursor baje. Para implementar este efecto tan chulo, tendremos que añadir tres codigos a nuestra web. El codigo esta preparado para poner 5 iconos en linea, pero podeis poner los que querais.| aqui teneis unos ejemplos, pasad el cursor por encima y vereis el efecto |
Lo primero que tenemos que añadir a nuestra plantilla son el JQuery y los scripts antes de </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script><script type="text/javascript"> var opacity = true; </script><script type="text/javascript"> $(document).ready(function(){ $("#icons img").hover(function(){ if(opacity) { $(this).stop().animate({opacity: 0.75, marginTop: -10}, 400); } else { $(this).stop().animate({marginTop: -10}, 400); } },function(){ if(opacity) { $(this).stop().animate({opacity: 1.0, marginTop: 0}, 400); } else { $(this).stop().animate({marginTop: 0}, 400); } }); }); </script> |
Ahora los estilos los pegamos en el <body> de la plantilla
Y por ultimo, en un elemento HTML pegamos el codigo alli donde queramos mostrarlo, modificando lo que esta en rojo
<ul id="icons"> <li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a> <li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a> <li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a> <li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a> <li><a href="ENLACE"><img src="URL DE LA IMAGEN"/></a> </li></ul> |
