0

I am having a repeatable tile generator. So I am generating HTML with a for loop. I need each tile, when I hover on it, to fade out and another div will be placed instead in the same location. I tried with having for each repeatable tile a div with position: relative .. then I place a hidden div that I make it appear on hover, with position: absolute .. however children divs are placed in the same location for the first tile, they're not placed according to their parent.

Here's the code I have that mimics what am having: 

.titleContainer:hover{
    opacity: 0;
}

.headers{
    opacity: 0;
}
.headers:hover{
    opacity: 1;
}
<div data-reactroot="" class="">
  <div class="tile" style="position: relative;">
    <div class="titleContainer" style="position: relative; float: left; width: 25%; margin-right: 30px;">
    <img src="https://cdn.pixabay.com/photo/2018/08/31/19/16/fan-3645379_960_720.jpg" style="width: 100%; height: 200px;">
      <div class="" style="background-color: red; opacity: 0.8; position: absolute; top: 0px; width: 100%; height: 40px;">
        <h3 style="color: white; text-align: center; line-height: 0.5;">Random Tile</h3>
      </div>
    </div>
    <div class="headers" style="background-color: red; position: absolute; width: 25%; height: 200px;">Hello</div>
  </div>
  <div class="tile" style="position: relative;">
    <div class="titleContainer" style="position: relative; float: left; width: 25%; margin-right: 30px;">
    <img src="https://cdn.pixabay.com/photo/2014/05/02/21/47/workstation-336369_960_720.jpg" style="width: 100%; height: 200px;">
      <div class="" style="background-color: red; opacity: 0.8; position: absolute; top: 0px; width: 100%; height: 40px;">
        <h3 style="color: white; text-align: center; line-height: 0.5;">Quick Links</h3>
      </div>
    </div>
    <div class="headers" style="background-color: red; position: absolute; width: 25%; height: 200px;">Hello</div>
  </div>
  <div class="tile" style="position: relative;">
    <div class="titleContainer" style="position: relative; float: left; width: 25%; margin-right: 30px;">
    <img src="https://cdn.pixabay.com/photo/2015/01/14/18/41/home-office-599475_960_720.jpg" style="width: 100%; height: 200px;">
      <div class="" style="background-color: red; opacity: 0.8; position: absolute; top: 0px; width: 100%; height: 40px;">
        <h3 style="color: white; text-align: center; line-height: 0.5;">Global Links</h3>
      </div>
    </div>
    <div class="headers" style="background-color: red; position: absolute; width: 25%; height: 200px;">Hello</div>
  </div>
</div>

As you see, hovering on the first tile will only show ALL inner divs placed on top of each other, and the other tiles won't have the behavior when hovering.

DMZ
  • 185
  • 8
  • and you forget the float ... – Temani Afif Sep 18 '18 at 12:50
  • @TemaniAfif what do you mean? can you clarify more? I am still a beginner – DMZ Sep 18 '18 at 12:53
  • use the dev tools and inspect `title` you will see it has height :0 and all of them are below each other because inside you have only float element and absolute element – Temani Afif Sep 18 '18 at 12:55
  • better than inspecting the element, add border to all `title` and you will see – Temani Afif Sep 18 '18 at 12:55
  • @TemaniAfif but the float element has position of relative, which should make its child element have the position related to it not to the body of the page, right? – DMZ Sep 18 '18 at 12:59
  • your element is the child of title not the float element so it's positionned relatively to that element and that element is broken because inside it there is only float and absolute element .. add border to `title` and see how it behave – Temani Afif Sep 18 '18 at 13:01
  • yeah, I added border to the tile element, it took the whole width of the page. I'll try to tweak it and see how it goes and get back to you, i'll also read the other stackoverflow links you suggested to get a better idea and will ask you here in the comments section :) Thanks @TemaniAfif – DMZ Sep 18 '18 at 13:03
  • read especially the third question ... the first one will show you how to deal with float but in your case better use `inline-block` than float and you won't have issues – Temani Afif Sep 18 '18 at 13:05
  • Clear fixed it for me :) – DMZ Sep 18 '18 at 13:11
  • Will try out inline-block and see how it goes, thanks a lot for your assistance :) – DMZ Sep 18 '18 at 13:12

0 Answers0