Problemi di posizionamento al mouse hover

[rubikk]

Salve,
sto tentando di realizzare mediante css un effetto che al passaggio del mouse su un immagine fa comparire un testo su sfondo opaco. Il problema è che funziona tutto eccezion fatta per lo sfondo opaco, che sfora un po' verso il basso. Aggiungo il codice, magari qualcuno più capace di me (e non ci vuole molto ) riesce a sistemare la cosa...

Il codice HTML interessato:

  <div id="content-wrap">
    <div id="content">
      <div id="main">
        
        <div class="post image-container"> 
 
        <div class="imgWrap">
        [img]images/terapie-img/diagnosi1.png[/img]<span class="imgDescription">This image looks super neat.</span></div> 
        
        <div class="imgWrap">[img]images/terapie-img/igiene1.png[/img]<span class="imgDescription">This image looks super neat.</span></div>
        
       </div>
      
      </div>
    </div>
  </div>

Le parti del CSS interessate:

/* top elements */
* {
	padding: 0;
	margin: 0;
}
body {
	margin: 0;
	padding: 0;
	font: normal 73%/1.5em 'Trebuchet MS', Tahoma, sans-serif;
	color: #555;
	background: #FFF url(../images/bg_verde_tx2.jpg) repeat-x;
	text-align: center;
}
/* links */
a {
	background: inherit;
	color: #72A545;
	text-decoration: none;
}
a:hover {
	background: inherit;
	color: #006699;
	text-decoration: underline;
}
/* headers */
h1, h2, h3 {
	font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
}
h1 {
	font-size: 1.4em;
	color: #1da8c8;
}
h2 {
	font-size: 1.2em;
	text-transform: uppercase;
}
h3 {
	font-size: 1.2em;
}
p, h1, h2, h3 {
	margin: 10px 15px;
}
ul, ol {
	margin: 10px 30px;
	padding: 0 15px;
}
/* images */
img {
	border: 1px solid #DADADA;
	padding: 5px;
	background: #FAFAFA;
}
img.float-right {
	margin: 5px 0px 5px 15px;
}
img.float-left {
	margin: 5px 15px 5px 0px;
}
/* main */
#main {
	float: left;
	width: 68%;
	margin: 0 0 10px 0;
	padding: 0;
}
#main h1 {
	padding: 10px 0px 0px 5px;
	margin: 0 0 0 10px;
	border-bottom: 1px solid #f2f2f2;
	font: normal 1.5em 'Trebuchet MS', Tahoma, Sans-serif;
}
#main ul li {
	list-style-image: url(bullet.gif);
}
.post {
	margin: 0;
	margin-top: 5px;
	padding: 0;
	background: #FFF url(gradientbg.jpg) repeat-x;
	border: 1px solid #EFEDED;
}
/* alignment classes */
.float-left {
	float: left;
}
.float-right {
	float: right;
}
.align-left {
	text-align: left;
}
.align-right {
	text-align: right;
}
.align-center {
	text-align: center;
}
/* additional classes */
.clear {
	clear: both;
}
.gray {
	color: #BFBFBF;
}
.black {
	color: #000000;
}
.blue {
	color: #266D7E;
}
.simpleimage {
	border: none;
	background: none;
	padding: 1px;
}
.image-container {
	display: inline-block;
	position: relative;
}


/* TEMP */

.imgWrap {
	display: inline-block;
	position: relative;
}
.imgDescription {
	display: block;
	position: absolute;

	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(29, 106, 154, 0.72);
	color: #fff;
	visibility: hidden;
	opacity: 0;/*remove comment if you want a gradual transition between states
  -webkit-transition: visibility opacity 0.2s;
  */
}
.imgWrap:hover .imgDescription {
	visibility: visible;
	opacity: 1;
}

[rubikk]

Ultimamente ho problemi a spiegarmi quindi per rendere tutto più comprensibile allego una immagine sperando che si veda decentemente!



Quello che succede è che la parte che si scurisce sfora prolungandosi di qualche pixel sotto l'immagine e non riesco a capire di chi esattamente sia la "colpa"...

[rubikk]

Il fatto che il codice isolato e su altri computer funzioni mi rincuori, in effetti ero arrivato alla conclusione che il problema sia legato alle classi del css applicate ad altri div, con calma esaminerò meglio il resto del codice.
Per ora grazie di averci perso qualche minuto!