Problème de "zone active"

Bonjour tout le monde

Je suis débutant en CSS mais je vais essayer d'être le plus clair possible. Je crée un site style portfolio en ligne, ou chaque case represente un projet, voir ici :

http://www.lmip-artwork.com/Digipen%20Website/

J'ai reussi à donner tout les effets que je voulais a ces "cases", le seul pb est que lorsque je la survole, se met en route le txt h1 et h2 correctement, mais lorsque je me balade dans la case, si je rentre dans la zone reservée au txt, l'effet sur mon image de fond bug

Comment regler ce pb ?

PS: même pb avec les border.

HTML :

<div id="content_thumbnail" class="content_thumbnail">

<div id="projet1" class="thumbnail">
  <img src="imagebase.jpg" width="290" height="150" />
  <h1>Titre du projet</h1>
  <h2>Catégorie du projet</h2>
  </div>

CSS :

.thumbnail {
	
	background-color:#000;
	width:290px;
	height:150px;
	border: 5px solid #FFF;
	margin:10px 10px 10px 10px;
	float: left;
    position: relative;
	overflow:hidden;
	
}

h1 {
color: #FFF;
    font: 1em "Trebuchet MS",Arial,sans-serif ; 
}

.thumbnail h1 {
	font-size:18px;
	text-align:center;
	opacity:0;
	position:absolute;
	bottom: 20px;
	width:290px;

} 

.thumbnail:hover h1 {
	
	font-size:18px;
	bottom:55px;
	text-align:center;
	opacity:1;

} 

h2 {
color: #FFF;
    font: 1em "Trebuchet MS",Arial,sans-serif ; 
}

.thumbnail h2 {
	font-size:12px;
	text-align:center;
	opacity:0;
	position:absolute;
	bottom:0px;
	width:290px;

} 

.thumbnail:hover h2 {
	
	font-size:12px;
	bottom:35px;
	text-align:center;
	opacity:0.6;

} 

.thumbnail img {
	
	opacity:1;

} 

.thumbnail img:hover {
	
	opacity:0.2;

}

Essai de remplacer

.thumbnail img:hover {

par

.thumbnail:hover img {

Ca marche nickel Merci

Il suffit parfois de vraiment pas grand chose