Notas al estilo Flickr con CSS
Desde que uso flickr una de las cosas que más me gustan son las notitas que se le pueden poner a las fotos, y últimamente he tenido la curiosidad de ver como se harían mediante CSS, y la verdad es que es muy fácil.
Lo primero que tenemos que hacer es crear el contenedor con los enlaces de los tres personajes que tengo aquí arriba:
Una vez hecho esto, tenemos que maquetarlo con CSS, la idea es muy simple, vamos a posicionar los nombres de las notas lejos de la pantalla y cuando hagamos un hover encima de cada uno centramos la etiqueta, veamos como quedaría:
#fotitos {width: 500px;
height: 375px;
position: relative;
font-family: Arial, Verdana;
font-size: .9em;}
#fotitos ul {
margin: 0;
padding: 0;
list-style: none;}
#fotitos a {
position: absolute;
width: 100px;
height: 120px;
color: #000;
text-decoration: none;
border: 1px solid transparent;}
#fotitos .mantero a {
top: 160px;
left: 15px;}
#fotitos .milleiro a {
top: 150px;
left: 100px;}
#fotitos .pep a {
top: 130px;
left: 150px;}
#fotitos a:hover {
border-color: #d4d82d;}
#fotitos a .note {
position: absolute;
bottom: -3em;
width: 8em;
padding: 0.2em 0.5em;
background-color: #ffc;
text-align: center;
left: -3000000px;
margin-left: -5em;}
#fotitos a:hover .note {
left: 50px;}
Podéis ver como queda en la foto de arriba.
