Member Avatar for jspence29

I am trying to make a website page that looks roughly like this. All the DATA is at I don't understand why I can't just move the pictures around with absolute positioning, usually that overrides everything. sketch

My code is

ul#gallery
{
  list-style: none;
  width: 1300px;
  text-align: center;
  display: inline;
  background: rgba(255,255,255,0.7);
}
ul #gallery :hover {
  color: transparent;
  background: rgba(255,255,255,0.2);
}
ul#gallery li 
{
  list-style: none;
  display: inline;
} 

ul#gallery li a
{
  padding: 10px 10px 25px 10px;
  background-color: #fff;
  border: 1px solid #fff;
  -moz-box-shadow:  5px 5px 10px #888;
  -webkit-box-shadow:  5px 5px 10px #888;
  box-shadow: 5px 5px 10px #888;
  margin: 10px;
  text-decoration: none;
  display: inline-block;
  transition: all .3s;
  background: rgba(255,255,255,0.7);
}
ul#gallery li a:hover {
background: rgba(255,255,255,1.0);
}

ul#gallery li a img
{
  height: 150px;
  width: 250px;
  max-width: 100%;
}

ul#gallery li a p
{
  margin-top: 25px;
  text-align: center;
  color: #000;
  font: Helvetica, Arial, Sans-serif;
  text-decoration: none;
  font-size: 20px;
}
ul#gallery li a.gallery {position: absolute; top: 200px; left: 100px; }
ul#gallery li a.facts {position: absolute;}
ul#gallery li a.tour {position: absolute;}
ul#gallery li a.author {position: absolute;}

</style>
<body>

<div id="container">

   <h1> Singapore </h1>

     <h3><i> Singapore is the worlds first machine that works </i>- Lee Kuan Yew </h3>

<ul id="gallery">

  <li ><a class="gallery"href=""> <img src="gallery.jpg" alt="gallery" /> <p> Gallery </p> </a></li>


  <li ><a class="facts"href="#"> <img src="facts.jpg" alt="facts" /> <p> Facts </p></a></li>


  <li ><a class="tour"href="#"> <img src="tour.jpg" alt="tour" /> <p> Tour </p></a></li>


  <li ><a class="author"href="#"> <img src="author.jpg" alt="author" /> <p> Author </p> </a></li>

</ul>

I am also looking into something else, I am experimenting with making it so that when you hover over one of the squares (links) that the whole screen turns grey, except for the box. I am thinking about making a grey image that is only visible when you hover over one of the images, and covers everything else with a high zindex, and also when you hover over an image it has a higher zindex. I am just wondering if you guys have any Ideas to go with that? Thanks.

  • 2 Contributors
  • 1 Reply
  • 120 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

— quick diagnosis and two practical fixes. pointed at the problem, but that suggestion can produce overlap if used as-is.

Absolute-positioned elements are taken out of normal flow and are positioned relative to the nearest ancestor that has position set (anything but static). In the current setup your anchors are absolute but none of the parent elements are positioned, so they end up positioned relative to the page (and on top of each other). Also avoid display:inline on containers when you expect to control width/height — inline elements do not behave like blocks.

Two better approaches:

  1. Use normal layout (recommended)
  • Let the gallery flow with flexbox or grid so you do not need hard-coded coordinates. This is responsive and far simpler to maintain. Example (apply to your UL and item wrappers):
#gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; max-width:1200px; margin:0 auto; }
#gallery li { list-style:none; }
.gallery-card { width:250px; }
  1. If you must use absolute placement
  • Make the container a positioning context (set it to position:relative), then absolutely position children inside that container. Or set each li to position:relative and absolutely position the inner content — that keeps each item local to its own box instead of all items overlapping the viewport.

Dimming overlay on hover (CSS-only)

  • Add an overlay pseudo-element on the gallery and bring the hovered item above it with z-index. The pseudo-element covers the container; on :hover raise the hovered item so it sits above the dimmer:
#gallery { position:relative; }
#gallery::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.45); opacity:0; transition:opacity .2s; }
#gallery:hover::before { opacity:1; }
#gallery li { position:relative; z-index:1; }
#gallery li:hover { z-index:10; }

Troubleshooting tips: ensure the element you give a z-index is positioned (not static), be cautious that transform/opacity create stacking contexts, and favor semantic wrappers (figure/figcaption) for each tile.

Member Avatar for Member #949455

Absolute positioning, not positioning absolutely

This is very weird:

ul#gallery li a.gallery {position: absolute; top: 200px; left: 100px; }
ul#gallery li a.facts {position: absolute;}
ul#gallery li a.tour {position: absolute;}
ul#gallery li a.author {position: absolute;}

When you used CSS for ul#gallery li you used 1 ul#gallery li to be all absolute.

it should be something like this:

ul#gallery li {position: absolute; top: 200px; left: 100px; }

To move each images you need to used a <div> for each gallery the way you want it.

Edited by Member #949455 because: grammer
commented: To Rectify what some retard did to LastMitch +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.