Sass styles are not applying - html

Question

I wanted to know why my styles of class="project-borders" and class="project-overlay" are not applying to div elements of data-modal="modal3" and data-modal="modal6". These styles are applying to every div element where used, except these two. I don't understand what's the problem even though the classes are the same across every div element. You can see the styles by removing class="project-borders" from div elements of data-modal="modal3" and data-modal="modal6".
Here is the visual representation:- Codepen
Please any help would be appreciated.
My HTML:
<div class="projects">
<div data-modal="modal1" class="project-borders">
<div class="project-overlay">
<p>Coffee Grounds</p>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/A_small_cup_of_coffee.JPG" alt="">
</div>
<div data-modal="modal2" class="project-borders">
<div class="project-overlay">
<p>Startup Employee Directory</p>
</div>
<img src="https://www.hofstra.edu/images/positioning/id-directories.jpg" alt="">
</div>
<div data-modal="modal3" class="project-borders">
<div class="project-overlay">
<p>Words Guessing Game</p>
</div>
<img src="https://images.newindianexpress.com/uploads/user/imagelibrary/2019/10/15/w900X450/PUBG_.JPG" alt="">
</div>
<div data-modal="modal4" class="project-borders">
<div class="project-overlay">
<p>Motorcycle Parallax</p>
</div>
<img src="https://cdp.azureedge.net/products/USA/ZERO/2020/MC/MCY/SR-F/50/BOARDWALK_RED/2000000002.jpg" alt="">
</div>
<div data-modal="modal5" class="project-borders">
<div class="project-overlay">
<p>Picture Portfolio</p>
</div>
<img src="https://media.wired.com/photos/598e35fb99d76447c4eb1f28/master/pass/phonepicutres-TA.jpg" alt="">
</div>
<div data-modal="modal6" class="project-borders">
<div class="project-overlay">
<p>Video Creator Portfolio</p>
</div>
<img src="https://storage.googleapis.com/proudcity/petalumaca/uploads/2020/01/video-infographic.jpg" alt="">
</div>
</div>
My SASS:
.projects{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 80%;
margin: 0 auto;
column-gap: 50px;
row-gap: 50px;
// margin-top: 60px;
padding-top: 6%;
img{
width: 100%;
height: 100%;
cursor: pointer;
}
}
.project-borders{
position: relative;
border: 2px solid #000;
img{
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
left: 10px;
top: 10px;
}
&::before{
position: absolute;
border: 2px solid #ffde59;
content: "";
display: block;
position: absolute;
top: 25px;
left: 25px;
right: -20px;
bottom: -20px;
}
.project-overlay{
position: absolute;
left: 10px;
top: 10px;
bottom: 0;
transition: .5s;
background-color: rgb(76, 72, 68);
transition: .5s ease;
width: 100%;
height: 100%;
opacity: 0;
& p{
position: absolute;
font-size: 20px;
top: 45%;
width: 100%;
text-align: center;
color: #fff;
transition: .5s;
opacity: 0;
}
}
&:hover .project-overlay{
cursor: pointer;
opacity: 1;
z-index: 1;
}
&:hover .project-overlay p{
cursor: pointer;
display: block;
opacity: 1;
z-index: 1;
}
}

Answer 1

Based on your codepen, it doesn't seem like the 3rd and 6th modals are the problem with the styles displaying. The real problem is that all the content in your modals are absolutely positioned which takes them out of the ordinary context of the document, which causes the project-borders containers to have a height that only consists of the borders. You'll need to define a fixed height for that container for things to display correctly like so...
.project-borders {
position: relative;
border: 2px solid #000;
height: 209px;
}