Background+text survol image (avec un span)

Bonjour,

je voudrais qu'au survol d'une image, l'image s'assombrisse et laisse apparaître un titre.
Exemple ci dessous:

http://www.betatakaki.com/
page Identity and print

Pour le moment, j'ai fait ca:

<div class="principal">
					<a href="images/work/1big.jpg" class="swipebox" title="Internet website template for Val Thorens snowpark">
						<img src="images/work/1.jpg" alt="heyhey" />
						<span class="title">SNOWPARK VAL THORENS</span>
						<span class="description">Maquette de site</span>
					</a>
					
					<a href="images/work/2big.png" class="swipebox" title="Hampi in India, 2013">
						<img src="images/work/2.png" alt="Hampi in India, 2012">
						<span class="title">Yoyoy</span>
						<span class="description">Maquette de site</span>
					</a>

					<a href="images/work/3big.jpg" class="swipebox" title="Montanita, Ecuador 2013">
						<img src="images/work/3.jpg" alt="Montanita, Ecuador 2013">
						<span class="title">SNOWPARK VAL THORENS</span>
						<span class="description">Maquette de site</span>
					</a>
</div>

et mon CSS:

.principal
{
	position: relative;
	z-index: 4;
	width: 70%;
	height: 66%;
	left: 600px;
}

.principal img:hover
{
	position: absolute;
	z-index: 10;
	box-shadow: 0px 0px 10px #000000;
}

.swipebox img, span
{
	filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -moz-filter: brightness(100%);
        -o-filter: brightness(100%);
        -ms-filter: brightness(100%);
}

.swipebox img:hover, span:hover
{
	  filter: brightness(30%);
        -webkit-filter: brightness(30%);
        -moz-filter: brightness(30%);
        -o-filter: brightness(30%);
        -ms-filter: brightness(30%);
}

.title
{
	font-size: 1em;
	margin-left: 5%;
	margin-top: 10%;
	color: #e2133f;
	text-transform: uppercase;
}

.description
{
	font-size: 1em;
	font-size: 1.2em;
	margin-left: 8.2%;
	margin-top: 5%;
	color: #ffffff;
}

.principal span
{
	display: none;
}

.principal img:hover +span
{
	display: block;
	position: absolute;
	z-index: 18;
}

.principal img:hover +span+span
{
	display: block;
	position: absolute;
	z-index: 18;
}

title:hover
{
	display: none;
}

Le fond noir s'affiche bel et bien, mais lorsque je mets le curseur de la souris sur le span, le fond clignote et cela est très désagréable...


De plus, les span de description apparaissent tjrs au même endroit de la page...
alors que voudrais qu'ils soient positionné au même endroit dans chaque image

Je ne trouve pas de solution, help