Overlapping images when using fadeInUp until reload - html

Question

I don't have any experience with html, so I am using a free template for my website that uses fadeInUp to display images. When the page is first loaded one section overlaps the images on top of each other and even on top of a contact form at the bottom of the page. Shown here:
Overlapping Images
This persists until the page is reloaded, then it all works like it's supposed to. I've tried for days to find a solution, but with my extremely limited knowledge, it's hard to even know what to look for. Here is what it should look like and what it does look like once the page is reloaded:
Correct Layout
I'm hoping someone can help me figure out why this is happening. Happens in Safari, Chrome, and Edge and each time it is fixed when I reload.
Here is the code from the free template (modified by me to add descriptions and the correct images):
<!-- Projects Start -->
<div class="container-xxl py-5">
<div class="container">
<div class="section-title text-center">
<h1 class="display-5 mb-5">Portfolio Samples</h1>
</div>
<div class="row g-4 portfolio-container">
<div class="col-lg-4 col-md-6 portfolio-item first wow fadeInUp" data-wow-delay="0.1s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/ShojiLamp.jpg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/ShojiLamp.jpg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">For Sale</p>
<h4 class="mb3">Shoji Lamp</h4>
<p>Japanese inspired shoji lamp in walnut with maple panels. Castle joinery throughout.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item second wow fadeInUp" data-wow-delay="0.3s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/ChessBoard.jpg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/ChessBoard.jpg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">Custom Woodworking</p>
<h4 class="mb3">Chess Board</h4>
<p>Simple chessboard made from 19mm thick walnut with 4mm thick curly maple inlays. </p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item first wow fadeInUp" data-wow-delay="0.5s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/3dCuttingBoard.jpeg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/3dCuttingBoard.jpeg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">For Sale</p>
<h4 class="mb3">Bella Cutting Board</h4>
<p>50mm thick end grain cutting board crafted in walnut and hard maple. Featuring a 3D effect.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item second wow fadeInUp" data-wow-delay="0.1s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/TableLamp.jpg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/TableLamp.jpg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">For Sale - 2 available</p>
<h4 class="mb3">Riley Table Lamp</h4>
<p>A tilted shade and bent body offers a twist on a tradional table lamp with the cord threaded through the body. Crafted in walnut.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item first wow fadeInUp" data-wow-delay="0.3s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/EntrywayTable.jpg" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/EntrywayTable.jpg" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">For Sale</p>
<h4 class="mb3">Entryway Table</h4>
<p>A delicate live edge entryway table in spalted ash with walnut bowtie inlays. Cracks filled with black epoxy. Box joinery on the apron. </p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item second wow fadeInUp" data-wow-delay="0.5s">
<div class="rounded overflow-hidden">
<div class="position-relative overflow-hidden">
<img class="img-fluid w-100" src="img/GearShiftKnob.png" alt="">
<div class="portfolio-overlay">
<a class="btn btn-square btn-outline-light mx-1" href="img/GearShiftKnob.png" data-lightbox="portfolio"><i class="fa fa-eye"></i></a>
<a class="btn btn-square btn-outline-light mx-1" href=""><i class="fa fa-link"></i></a>
</div>
</div>
<div class="border border-5 border-light border-top-0 p-4">
<p class="text-primary fw-medium mb-2">Custom Woodworking</p>
<h4 class="mb3">Gear Shift Knob </h4>
<p>A custom gear shift knob commisioned in support of a loved one's fight with stomach cancer. Crafted in walnut with epoxy inlay.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Projects End -->