Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Popup image not visible because obstructed by block

byMR
June 7, 2023

I have the following code for familly trees:

<!DOCTYPE html>

<HTML lang="En">

<HEAD>
  <TITLE>Familly tree</TITLE>
  <LINK rel="stylesheet" href="styles.css">
  <META http-equiv="content-type" content="text/html; charset=utf-8">
  <FONT size = 6>
</HEAD>


<BODY style="background-color:FloralWhite;">

<DIV class="tree" align="center"> 
  <UL>
    <LI> 
      <DIV class="person child male">
        <DIV class="content"> 
          <DIV class="Positioning"> 
            <SPAN class="ImgHover" style="background-color: LightSteelBlue"><BR><STRONG>&nbsp <BOLD>Boby the king</BOLD>&nbsp </STRONG><BR>&nbsp born 19/04/1896, Tiaret (Algeria)&nbsp <BR>&nbsp deceased 11/01/1979, Marseille (France)&nbsp <BR>
              <SPAN style="display: inline-block; text-align: left; width: 100%"> &nbsp &#10551<A HREF="boby_the_king">page</A> 
              </SPAN> 
              <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
            </SPAN>
          </DIV>
          <DIV class="Positioning"> 
            <SPAN class="ImgHover" style="background-color: #FFCCFF "><BR><STRONG>&nbsp <BOLD>
              <SPAN style="font-weight: normal">spouse: </SPAN>Boby the king spouse</BOLD>&nbsp </STRONG><BR>&nbsp born 14/11/1901, Algeria&nbsp <BR>&nbsp deceased 17/09/1993, Marseille (France)&nbsp <BR><SPAN style="display: inline-block; text-align: left; width: 50%"> &nbsp &#10551<A HREF="Boby_spouse">page</A> </SPAN><SPAN style="display: inline-block; text-align: right; width: 50%"> &#10551<A HREF="Boby_spouse_tree">familly tree</A>&nbsp </SPAN> <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
            </SPAN>
          </DIV>
        </DIV>
      </DIV>
      <UL>
        <LI> 
          <DIV class="person child male">  
            <DIV class="content"> 
              <DIV class="Positioning"> 
                <SPAN class="ImgHover" style="background-color: LightSteelBlue"><BR><STRONG>&nbsp <BOLD>Boby son the prince</BOLD>&nbsp </STRONG><BR>&nbsp born 19/04/1896, Tiaret (Algeria)&nbsp <BR>&nbsp deceased 11/01/1979, Marseille (France)&nbsp <BR>
                  <SPAN style="display: inline-block; text-align: left; width: 100%"> &nbsp &#10551<A HREF="Boby_son">page</A> 
                  </SPAN> 
                  <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
                </SPAN>
              </DIV>
            </DIV>
          </DIV>
        </LI>
        <LI> 
          <DIV class="person child female" style="border-color: Magenta">
            <DIV class="content"> 
              <DIV class="Positioning"> 
                <SPAN class="ImgHover" style="background-color: #FFCCFF "><BR><STRONG>&nbsp <BOLD>Ali baba the great</BOLD>&nbsp </STRONG><BR>&nbsp born 14/11/1901, Algeria&nbsp <BR>&nbsp deceased 17/09/1993, Marseille (France)&nbsp <BR>
                  <SPAN style="display: inline-block; text-align: left; width: 100%"> &nbsp &#10551<A HREF="Ali_baba">page</A> 
                  </SPAN> 
                  <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
                </SPAN>
              </DIV>
            </DIV>
          </DIV>  
        </LI>
        <LI> 
          <DIV class="person child female" style="border-color: Magenta">
            <DIV class="content" > 
              <DIV class="Positioning"> 
                <SPAN class="ImgHover" style="background-color: #FFCCFF "><BR><STRONG>&nbsp <BOLD>Sophia Marciano </BOLD>&nbsp </STRONG><BR>&nbsp born 14/11/1901, Algeria&nbsp <BR>&nbsp deceased 17/09/1993, Marseille (France)&nbsp <BR>
                  <SPAN style="display: inline-block; text-align: left; width: 100%"> &nbsp &#10551<A HREF="Sophia_Marciano">page</A> 
                  </SPAN> <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
                </SPAN>
              </DIV>
              <DIV class="Positioning"> 
                <SPAN class="ImgHover" style="background-color: LightSteelBlue "><BR><STRONG>&nbsp 
                  <SPAN style="font-weight: normal">husband: </SPAN>
                  <BOLD>John Bohr</BOLD>&nbsp </STRONG><BR>&nbsp born 19/04/1896, Tiaret (Algeria)&nbsp <BR>&nbsp deceased 11/01/1979, Marseille (France)&nbsp <BR>
                  <SPAN style="display: inline-block; text-align: left; width: 50%"> &nbsp &#10551
                    <A HREF="John_Bohr">page</A> 
                  </SPAN><SPAN style="display: inline-block; text-align: right; width: 50%"> &#10551<A HREF="John_Bohr_tree">familly tree</A>&nbsp </SPAN> 
                  <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
                </SPAN>
              </DIV>
            </DIV>
          </DIV>
          <UL>
            <LI> 
              <DIV class="person child male" style="border-color: Coral">
                <DIV class="content" style="background-color: LightSalmon"> <BR><CENTER><STRONG>&nbsp <A HREF="children_tree">Children&nbsp </A></STRONG></CENTER><BR>
                </DIV>
              </DIV> 
            </LI>
          </UL>
        </LI>
      </UL>
    </LI>
  </UL> 
</DIV>

</body>

</html>

css:

/* Tree */

.tree ul {
  padding-top: 20px;
  position: relative;
  padding-inline-start: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree ul li ul {
    display: flex;
    justify-content: center;    
    position: relative;
    padding: 20px 0 0 0;
} 

.tree li {
  display: table-cell;
  text-align: center;
  vertical-align: top; /* added this */
  list-style-type: none;
  position: relative;
  /*the padding is 20px + border-top = 23px*/
  padding: 23px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 5px solid #ccc;
  width: 50%;
  height: 19px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 5px solid #ccc;
}


/*We need to remove left-right connectors from elements without 
any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Remove left connector from first child and 
right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 5px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 5px solid #ccc;
  width: 0;
  height: 21px;
}

.tree li .family {
  position: relative;
}


/* Person */

.person {
  border: 3px solid black;
  padding: 1.5px;
  min-width: 250px;
  /* min-height: 100px;
  to increase the min height of the boxes background-color: #FFFFFF; */
  display: inline-block;
}

.person.female {
  border-color: #F45B69;
  top: 0px
}

.person.male {
  top: 0px;
  border-color: #456990;
}

.person .content {
  position: relative;
  font-size: 16px;
  align: center; 
  text-align: center;
}


/*-----------------------------*/

/* Image on hovering for links */

 span.product a img {
    display: none;
    position: absolute;
    left: -20px;
    top: -20px;
}

span.product a {
    display: inline-block;
    position: relative;
}

span.product a img {
    display: none;
}

span.product a:hover img {
    display: inherit;
}

/*-----------------------------*/

/* Image on hovering for tree leaf */

.content span.ImgHover {
    display: block;  /* turn that to inline-block to make the stuff work in another contexes */
    position: relative;
}

.content span.ImgHover img {
    position: absolute;
    display: inherit;
    right: -130px;
    top: 0px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 2s;
}

.content span.ImgHover:hover img {
    display: inherit;
    top: 0px;
    opacity: 1;
}

When the user hovers on a block, an image popups. This works well for a block not included in a tree, but when the block is included in the tree, as in the code above, if the block is on the left of another block, the image is obstructed by the block to the right (it passes under it). On the other hand, the popup continues to work well for blocks at the right side, as they are not obstructed by any block. Is there a command to tell the image to be on top? other ideas?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

z-index: 999;

/* Tree */

.tree ul {
  padding-top: 20px;
  position: relative;
  padding-inline-start: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree ul li ul {
    display: flex;
    justify-content: center;    
    position: relative;
    padding: 20px 0 0 0;
} 

.tree li {
  display: table-cell;
  text-align: center;
  vertical-align: top; /* added this */
  list-style-type: none;
  position: relative;
  /*the padding is 20px + border-top = 23px*/
  padding: 23px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 5px solid #ccc;
  width: 50%;
  height: 19px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 5px solid #ccc;
}


/*We need to remove left-right connectors from elements without 
any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Remove left connector from first child and 
right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 5px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 5px solid #ccc;
  width: 0;
  height: 21px;
}

.tree li .family {
  position: relative;
}


/* Person */

.person {
  border: 3px solid black;
  padding: 1.5px;
  min-width: 250px;
  /* min-height: 100px;
  to increase the min height of the boxes background-color: #FFFFFF; */
  display: inline-block;
}

.person.female {
  border-color: #F45B69;
  top: 0px
}

.person.male {
  top: 0px;
  border-color: #456990;
}

.person .content {
  position: relative;
  font-size: 16px;
  align: center; 
  text-align: center;
}


/*-----------------------------*/

/* Image on hovering for links */

 span.product a img {
    display: none;
    position: absolute;
    left: -20px;
    top: -20px;
}

span.product a {
    display: inline-block;
    position: relative;
}

span.product a img {
    display: none;
}

span.product a:hover img {
    display: inherit;
}

/*-----------------------------*/

/* Image on hovering for tree leaf */

.content span.ImgHover {
    display: block;  /* turn that to inline-block to make the stuff work in another contexes */
    position: relative;
}

.content span.ImgHover img {
    position: absolute;
    display: inherit;
    right: -130px;
    top: 0px;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 2s;
    z-index: 99;
}

.content span.ImgHover:hover img {
    display: inherit;
    top: 0px;
    opacity: 1;
}
<DIV class="tree" align="center"> 
  <UL>
    <LI> 
      <DIV class="person child male">
        <DIV class="content"> 
          <DIV class="Positioning"> 
            <SPAN class="ImgHover" style="background-color: LightSteelBlue"><BR><STRONG>&nbsp <BOLD>Boby the king</BOLD>&nbsp </STRONG><BR>&nbsp born 19/04/1896, Tiaret (Algeria)&nbsp <BR>&nbsp deceased 11/01/1979, Marseille (France)&nbsp <BR>
              <SPAN style="display: inline-block; text-align: left; width: 100%"> &nbsp &#10551<A HREF="boby_the_king">page</A> 
              </SPAN> 
              <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
            </SPAN>
          </DIV>
          <DIV class="Positioning"> 
            <SPAN class="ImgHover" style="background-color: #FFCCFF "><BR><STRONG>&nbsp <BOLD>
              <SPAN style="font-weight: normal">spouse: </SPAN>Boby the king spouse</BOLD>&nbsp </STRONG><BR>&nbsp born 14/11/1901, Algeria&nbsp <BR>&nbsp deceased 17/09/1993, Marseille (France)&nbsp <BR><SPAN style="display: inline-block; text-align: left; width: 50%"> &nbsp &#10551<A HREF="Boby_spouse">page</A> </SPAN><SPAN style="display: inline-block; text-align: right; width: 50%"> &#10551<A HREF="Boby_spouse_tree">familly tree</A>&nbsp </SPAN> <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
            </SPAN>
          </DIV>
        </DIV>
      </DIV>
      <UL>
        <LI> 
          <DIV class="person child male">  
            <DIV class="content"> 
              <DIV class="Positioning"> 
                <SPAN class="ImgHover" style="background-color: LightSteelBlue"><BR><STRONG>&nbsp <BOLD>Boby son the prince</BOLD>&nbsp </STRONG><BR>&nbsp born 19/04/1896, Tiaret (Algeria)&nbsp <BR>&nbsp deceased 11/01/1979, Marseille (France)&nbsp <BR>
                  <SPAN style="display: inline-block; text-align: left; width: 100%"> &nbsp &#10551<A HREF="Boby_son">page</A> 
                  </SPAN> 
                  <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
                </SPAN>
              </DIV>
            </DIV>
          </DIV>
        </LI>
        <LI> 
          <DIV class="person child female" style="border-color: Magenta">
            <DIV class="content"> 
              <DIV class="Positioning"> 
                <SPAN class="ImgHover" style="background-color: #FFCCFF "><BR><STRONG>&nbsp <BOLD>Ali baba the great</BOLD>&nbsp </STRONG><BR>&nbsp born 14/11/1901, Algeria&nbsp <BR>&nbsp deceased 17/09/1993, Marseille (France)&nbsp <BR>
                  <SPAN style="display: inline-block; text-align: left; width: 100%"> &nbsp &#10551<A HREF="Ali_baba">page</A> 
                  </SPAN> 
                  <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
                </SPAN>
              </DIV>
            </DIV>
          </DIV>  
        </LI>
        <LI> 
          <DIV class="person child female" style="border-color: Magenta">
            <DIV class="content" > 
              <DIV class="Positioning"> 
                <SPAN class="ImgHover" style="background-color: #FFCCFF "><BR><STRONG>&nbsp <BOLD>Sophia Marciano </BOLD>&nbsp </STRONG><BR>&nbsp born 14/11/1901, Algeria&nbsp <BR>&nbsp deceased 17/09/1993, Marseille (France)&nbsp <BR>
                  <SPAN style="display: inline-block; text-align: left; width: 100%"> &nbsp &#10551<A HREF="Sophia_Marciano">page</A> 
                  </SPAN> <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
                </SPAN>
              </DIV>
              <DIV class="Positioning"> 
                <SPAN class="ImgHover" style="background-color: LightSteelBlue "><BR><STRONG>&nbsp 
                  <SPAN style="font-weight: normal">husband: </SPAN>
                  <BOLD>John Bohr</BOLD>&nbsp </STRONG><BR>&nbsp born 19/04/1896, Tiaret (Algeria)&nbsp <BR>&nbsp deceased 11/01/1979, Marseille (France)&nbsp <BR>
                  <SPAN style="display: inline-block; text-align: left; width: 50%"> &nbsp &#10551
                    <A HREF="John_Bohr">page</A> 
                  </SPAN><SPAN style="display: inline-block; text-align: right; width: 50%"> &#10551<A HREF="John_Bohr_tree">familly tree</A>&nbsp </SPAN> 
                  <IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;"><BR><BR>
                </SPAN>
              </DIV>
            </DIV>
          </DIV>
          <UL>
            <LI> 
              <DIV class="person child male" style="border-color: Coral">
                <DIV class="content" style="background-color: LightSalmon"> <BR><CENTER><STRONG>&nbsp <A HREF="children_tree">Children&nbsp </A></STRONG></CENTER><BR>
                </DIV>
              </DIV> 
            </LI>
          </UL>
        </LI>
      </UL>
    </LI>
  </UL> 
</DIV>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading