JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

/*  Scroll down to see solution  */

#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;
}


/*
  vv  Below this point is what's different  vv
*/



/* Make all the children translucent first ... */
#catalogue:hover div {
    opacity:0.5;
}

/* ... then make the currently-hovered div opaque and transform it */
#catalogue div:hover {
    -webkit-transition: -webkit-transform 1s linear;
    -webkit-transform: translateY(-10%);
    opacity: 1;
}