کلاس های تو درتو در سی اس اس

[ali ali sh]

با سلام
من میخواهم زمانی که روی یک دیو هاور میکنم یکی از دیو های زیرمجموعه اپاسیتیش کم شه و دیگری رنگش قرمز شه اما هر کاری میکنم نمیشه...
اینم از کدم:


<div class="gallery"><h1 class="arrange">Learning HTML</h1> <a href="html.png" class="imglink"><img src="js.png" alt="learn HTML" width="50cm" height="50cm" style="Border-radius:100px;" class="a" /></a> </div> <div class="gallery"> <h1 class="arrange">Learning PHP</h1> <a href="php.png" class="imglink"><img src="php.png" alt="learn PHP" style="Border-radius:100px;" class="a" width="50cm" height="50cm" /></a> </div> <div class="gallery"> <h1 class="arrange">Learning MYSQL</h1> <a href="mysql.png" class="imglink"><img src="mysql.png" alt="learn MYSQL" width="50cm" height="50cm" style="Border-radius:100px;" class="a" /></a> </div> <div class="gallery"><h1 class="arrange">Learning HTML</h1> <a href="html.png" class="imglink"><img src="js.png" alt="learn HTML" width="50cm" height="50cm" style="Border-radius:100px;" class="a" /></a> </div> <div class="gallery"> <h1 class="arrange">Learning JS</h1> <a href="js.png" class="imglink"><img src="js.png" alt="learn JS" style="Border-radius:100px;" width="50cm" height="50cm" class="a" /></a> </div> <div class="gallery"> <h1 class="arrange">Learning PHP</h1> <a href="php.png" class="imglink"><img src="php.png" alt="learn PHP" style="Border-radius:100px;" class="a" width="50cm" height="50cm" /></a> </div> <div class="gallery"> <h1 class="arrange">Learning MYSQL</h1> <a href="mysql.png" class="imglink"><img src="mysql.png" alt="learn MYSQL" width="50cm" height="50cm" style="Border-radius:100px;" class="a" /></a> </div> <div class="gallery"><h1 class="arrange">Learning HTML</h1> <a href="html.png" class="imglink"><img src="js.png" alt="learn HTML" width="50cm" height="50cm" style="Border-radius:100px;" class="a" /></a> </div> <div class="gallery"> <h1 class="arrange">Learning JS</h1> <a href="js.png" class="imglink"><img src="js.png" alt="learn JS" style="Border-radius:100px;" width="50cm" height="50cm" class="a" /></a> </div> <div class="gallery"> <h1 class="arrange">Learning PHP</h1> <a href="php.png" class="imglink"><img src="php.png" alt="learn PHP" style="Border-radius:100px;" class="a" width="50cm" height="50cm" /></a> </div> <div class="gallery"> <h1 class="arrange">Learning MYSQL</h1> <a href="mysql.png" class="imglink"><img src="mysql.png" alt="learn MYSQL" width="50cm" height="50cm" style="Border-radius:100px;" class="a" /></a> </div> <div class="gallery"><h1 class="arrange">Learning HTML</h1> <a href="html.png" class="imglink"><img src="js.png" alt="learn HTML" width="50cm" height="50cm" style="Border-radius:100px;" class="a" /></a> </div> </div>
و کد سی اس اسم:

.gallery{
border: 1px solid #cccccc;
width: 180px;
float: right;
text-align:center;
padding: 20px;
margin: 25px;
}
.gallery:hover{

opacity: 0.5;
filter: alpha(opacity=50);


border: 1px solid black;
color:red;

}
.gallery img{
width: 100%;
height: auto;
}
.arrange{
text-align: center;
padding: 15px;
}

چه کنم؟؟؟