I am creating a new portfolio site. I am using wordpress and coding in a custom html block.

I want to use a <div id="hovertrigger1"></div> as border for another <div id="gallery1">[gmedia id=13]</div>.

In other words, "#gmedia-gallery should be always below .hovertrigger, ideally with a little space.

If I change the html hierarchie my layered divs gets broken. Right now I am using a minus margin with a fixed pixel distance. I want it to be correctly responsive to screen size.

my site: http://lilphil.de/ my current code:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  blend-mode: lighten;
  z-index: 100;
  pointer-events: none;
  position: relative;
  mix-blend-mode: lighten;
}

.logo {
  grid-area: 1 / 1 / 6 / 5;
  text-align: center;
  z-index: 400;
  opacity: 1;
  pointer-events: none;
  height: 100%;
  width: 100%;
}

.hovertrigger {
  z-index: 1000;
  grid-area: 1 / 1 / 4 / 5;
  width: 100%;
  height: 50%;
  pointer-events: auto;
  background: none;
}

.logoanim {
  grid-area: 1 / 1 / 6 / 5;
  text-align: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  height: 100%;
  width: 100%;
}

#gallery1 {
  margin-top: -590px;
}

#hovertrigger1:hover~.logoanim {
  opacity: 1;
}

#hovertrigger1:hover~div.logo {
  opacity: 0
}

.wp-image-536 {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.wp-image-587 {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div >
  <div  id="hovertrigger1"></div>
  <div  id="logoanim1"><img src="http://lilphil.de/wp-content/uploads/2022/08/Comp-1.gif" alt="" ></div>
  <div  id="logo1"><img src="http://lilphil.de/wp-content/uploads/2022/08/Comp1_00000.jpg" alt="" ></div>
</div>
<div  id="gallery1">[gmedia id=13]</div>

I really hope I could explain my problem.

CodePudding user response：

Well I tried some things and I think the easiest way is to change

#gallery1 {
  margin-top: -590px;
}

to

#gallery1 {
  margin-top: -38%;
}

as the other divs already scale on percentages.

CodePudding user response：

If you haven't tried it already, you may find it useful to use a grid view layout when designing your web page. Basically, if you divide the entire page into a grid with columns and rows (sized using relative units, like percentages), you can place #gallery1 in the row beneath #hovertrigger1. That way, your divs will always be layered regardless of screen size.

Also, if possible, I recommend using relative units instead of pixels so that your webpage elements stay proportioned across different screen dimensions and pixel resolutions.