Tautvydas Būda Tautvydas Būda - 9 months ago 51
CSS Question

How on div hover make other div's image animate

guys so basically I'm a bit stuck, the deal is that, the div that i need to hover on is under the div which image i need to trigger, I have no idea how to do that, and i need to do this with css. Simply it is layout with floats to left, so changing positions is hard form me. Any 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>

need to hover on div which has id of melyna to trigger div of zydra id image
all of divs are given float left and some kind of width and height, it's simple color block layout, would love to hear your guys suggestions and if there is no way, how to move my div which contains image to bottom that it won't change layout

Answer Source

Yes you need to rearrange DIVs inside #layout upside down and let the flex css arrange it back for you. like this:

#layout {
  display: flex;
  /*this property will normalize the layout*/
  flex-direction: row-reverse;
#layout div {
  flex: 1;
  height: 200px;
  border: 1px solid green;
#layout div#melyna:hover ~ div>img {
  opacity: .5;
  height: 5px;
  width: 15px;
div>img {
  transition: 2s all linear;
<!--here you have to arrange back forward-->
<div id="layout">
  <div id="melyna">hover me</div>
  <div id="zalia"></div>
  <div id="zydra">
    <img src="http://www.w3schools.com/html/pic_mountain.jpg" width="100%" height="100%">