html - How on div hover make other div's image animate -

guys i'm bit stuck, deal that, div need hover on under div image need trigger, have no idea how that, , need css. layout floats left, changing positions hard form me. ideas? here html code

<div id="layout">     <div id="zydra"><img src="1blokopav.jpg"></div>     <div id="zalia"> </div>     <div id="melyna"></div>     <div id="geltona"></div>     <div id="orandzine"></div>     <div style="clear: both;"></div>     <div id="ruda"></div>     <div id="raudona"></div>       <div id="balta"></div> </div> 

need hover on div has id of melyna trigger div of zydra id image of divs given float left , kind of width , height, it's simple color block layout, love hear guys suggestions , if there no way, how move div contains image bottom won't change layout

yes need rearrange divs inside #layout upside down , let flex css arrange you. this:

edited

#layout {    display: flex;    /*this property normalize layout*/    flex-direction: row-reverse;    flex-wrap: wrap-reverse;  }  #layout div {    flex: 1 0 20%;    height: 100px;    border: 1px solid green;  }  #layout div#melyna:hover ~ div>img {    opacity: .5;    height: 5px;    width: 15px;  }  #layout div:nth-child(n+5) {    flex: 1 0 33.3%;    background-color: lime;  }  div>img {    transition: 2s linear;  }

<!--here have arrange forward-->  <div id="layout">    <div id="zalia"></div>    <div id="melyna">hover me</div>    <div id="geltona"></div>    <div id="orandzine"></div>    <!--clear: both-->    <div id="ruda"></div>    <div id="raudona"></div>    <div id="balta"></div>    <div id="zydra">      <img src="http://www.w3schools.com/html/pic_mountain.jpg" width="100%" height="100%">    </div>  </div>