CODEWITHSUNDEEP
htmlcsslayout
Tautvydas Būda
Tautvydas Būda

Reputation: 214

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

Upvotes: 1

Views: 581

Answers (1)

RizkiDPrast
RizkiDPrast

Reputation: 1725

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

Edited

#layout {
  display: flex;
  /*this property will normalize the 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 all linear;
}
<!--here you have to arrange back 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>

Upvotes: 2

Related Questions