css hover interaction problems
===

i have this html code:

    <div id="main">
        <section id="content"> 
              <div id="catalogue">    
              <div class="coffee"><a href="coffees.html"><img src="img/kafesmenu.jpg"alt="coffees" width="250" height="300"></a></div>          
              <div class="drink"> <a href="drink.html"><img src="img/potomenu.jpg" alt="drinks" width="250" height="300"></a> </div>
             <div class="food"> <a href="food.html"><img src="img/faimenu.jpg" width="250" height="300" alt="food"></a> </div>       
            </div>
        </section>
      </div>



i want to hover over COFFEE and change the DRINKS/FOOD opacity 
this should be done by using the css rule .coffee :hover + .drink{...}
this is my css 

    #catalogue .coffee{
				position: absolute;
				width: 250px;
				height:300px;
				background-color: #1C0903;	
			}
				
				
			#catalogue .drink {
				position: absolute;
				width: 250px;
				left: 260px;
				background-color: #1C0903;
			}	
			#catalogue .food {
				position: absolute;
				width: 250px;
				left: 520px;	 
				background-color: #1C0903;
			}
			#catalogue .coffee:hover {
				-webkit-transition: -webkit-transform 1s linear;
				-webkit-transform: translateY(-10%);
			}
			#catalogue .coffee:hover + .drink{
				opacity:0.5;
				}
			#catalogue .coffee:hover + .food {
				opacity:0.5;
				}


my problem is that only DRINK's opacity is changing when i hover over COFFEES and i dont know why Food isnt reacting.
( i did the same thing to all the classes and this is what happens:
Coffee:hover--Drink new opacity;Food NADA
Drink:hover--Coffee NADA; Food new opacity
Food:hover--Drink NADA,Coffee NADA)
What is going on here?