Pinceladas da Web

Se você utiliza o Flickr, ou já utilizou, sabe do que eu estou falando, existe uma maneira bastante simples de se conseguir um efeito similar ao utilizado no Flickr somente com CSS. E o mais interessante e que esse código funciona em todos os browsers, ótimo para você que quer fazer um álbum de fotos on-line e quer adicionar algum comentário dentro da foto. Primeiramente, vejam esse exemplo. Agora vamos ao nosso código HTML:

<div id="foto">
  <div class="nota1">
    <a href="#">
	<div class="contorno">
	<div class="texto">O rosto cheio de barro!!!</div>
	</div>
    </a>
  </div>
</div>

Basicamente utilizamos de uma div que contém todo o código, e onde é inserida a imagem, após criamos uma div para o quadrado onde você quer colocar a nota, outra para o contorno e uma outra para o texto. O resto é puro CSS:

CSS

#foto {
	position:relative;
	width:760px;
	height:570px;
	margin:0 auto;
	background:url(annalu.jpg) no-repeat;
}
a {
	color:#fff;
	text-decoration:none;
	position: absolute; /*Muito Importante para poder posicionar os retangulos onde eu quiser*/
	width: 100px; /* Tamanho de todos os retangulos */
	height: 120px; /* Tamanho de todos os retangulos */
}
a:hover {
	border: 1px solid #fff; /* Borda interior branca */
	cursor: pointer;
}
/* Borda exterior amarela */
.contorno{
	display: block;
	width: 104px;
	height: 124px;
	position: absolute;
	top: -3px;
	left: -3px;
}
a:hover .contorno {
	border: 1px solid #D4D82D;
}
/* Posicao de cada nota */
.nota1 a{
	top: 75px;
	left: 280px;
}
/* Regras para mostrar o texto de cada nota */
.texto {
	position: absolute;
	left: -10000px;
	bottom: -35px;
	width: 100px;
	text-align:center;
	color:#000000;
	background-color:#FFFFD3;
	font:11px Geneva, Arial, Helvetica, sans-serif;
	-moz-border-radius: 8px; /* Bordas redondas, funciona somente no Firefox */
}
a:hover .texto{
	left:2px;
}

Como podem ver no CSS, basta colocar position:relative para a div que vai conter a foto, com isso, você consegue posicionar absolutamente onde quiser as notas que posteriormente você vai adicionando. Dêem uma olhada nesse segundo exemplo.

Referências

• Leandono´s Blog – Añadir notas en imágenes (similar a Flickr) utilizando CSS