I'm struggling to position two images in different sections of a grid layout without overlapping them.
I've attempted referencing the images by both their class and id, but they continue to occupy the same grid space.
Referencing the images by their id seems to solve the issue as it allows me to alter the background successfully.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="homeCSS.css">
</head>
<title>
Home Page
</title>
<header class="header">
<h1>Welcome [User Name]</h1>
</header>
<body>
<div class="container">
<div class="image" id="imageOrder">
<img src="images/logo.png" class="imageLinks"="" id="orderForm">
<div class="overlay" id="overlayOrder">
<div class="overlayText" id="orderText">
Order Overlay
</div>
</div>
</div>
<div class="image" id="imageInvoice">
<img src="images/logo.png" class="imageLinks"="" id="invoiceForm">
<div class="overlay" id="overlayInvoice">
<div class="overlayText" id="invoiceText">
Invoice Overlay
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap:5px;
grid-template-areas: "header header" "imageOrder imageInvoice";
background:#eee;
}
header{
grid-area: header;
place-self: center;
}
#orderForm{
grid-area: imageOrder;
background-color: springgreen;
}
#invoiceForm{
grid-area: imageInvoice;
background-color: chartreuse;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
#imageOrder :hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
}
An image illustrating the current behavior (Chrome screenshot)