Menu Despeagable

Ayuda Para Tu Web

DanGrecks ~ ˇAyuda WebMaster!

Enlaces Sobre Imagen

Lo que intentamos en esta ocasión es mostrar una imagen y sobre ella solapar una serie de enlaces. Algo muy sencillo pero que con un poco de CSS puede quedar bien y ofrecernos un resultado curioso.

Como utilidad se me ocurre que podría servir para colocar en la sidebar con algunos enlaces prioritarios para el sitio, que quedarían algo más destacados por la imagen que los va a acompañar. Eso o cualquier otra cosa que se les pueda ocurrir, 
of course. Ver Ejemplo [ Click Aqui ].

Para conseguir esto tenemos que utilizar un par de cajas. Una que incluya lo que serán los enlaces (links) y otra padre que además de los enlaces contenga la imagen (imagelinks). En consecuencia el HTML quedaría así:



Ahora ya sólo es cuestión de añadir nuestro CSS para hacer la magia:



Si no fuera por la diversidad de navegadores el código se quedaría en cerca de la mitad, pero lo fundamental de esto es hacer que la caja interior (.links), la de los enlaces, tenga un posicionamiento absoluto (position: absolute;) con respecto a su contenedora (position: relative;) para que la podamos situar solapada y justo abajo del todo (bottom: 0;).

La segunda cuestión importante es que los enlaces se muestran inicialmente semitransparentes (opacity: .5;) y que es al hacer hover cuando los hacemos totalmente opacos. El resto sólo sirve para hacer el diseño adaptable y configurar padding, colores y fuentes. ¡Ah,sí! ..y el transition para que salga con el efecto fade.



Copyright © 2009-2013| DanGrecks | by AnGrecK

En DanGrecks nos encargamos de que todos los usuarios puedan encontrar lo que están buscando fácilmente.





DanGrecks esta Hostiado en Paginawebgratis.es. Lo Recomendamos para registrar su sitio web Totalmente Grátis.





Todos los Derechos reservados a sus respectivos Dueños. Página creada y editada por AnGrecK.





Volver Arriba ↑

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=