Full image overlay caption css not working on Angular with router outlet

Question

Hi working on an angular app I have a portfolio section with images and some text that should show when you put pointer over the image (overlay caption) and it used to work if I had everything on the app.component.html but when I configured the router outlet it stoped working and now it stoped working and shows like this: enter image description here

Insted of this:

enter image description here

My html code is this:

div id="/home/portfolio">
  <div class="container-fluid p-0">
    <div class="row g-0">
        <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="assets/img/portfolio/fullsize/pic-frontend1.jpg" title="Project Name">
                <img class="img-fluid" src="assets/img/portfolio/thumbnails/pic-frontend1.jpg" alt="..." />
                <div class="portfolio-box-caption">
                    <div class="project-category text-white-50">Web Applications</div>
                    <div class="project-name">Angular/ React</div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="assets/img/portfolio/fullsize/pic-backend1.jpg" title="Project Name">
                <img class="img-fluid" src="assets/img/portfolio/thumbnails/pic-backend1.jpg" alt="..." />
                <div class="portfolio-box-caption">
                    <div class="project-category text-white-50">Backend</div>
                    <div class="project-name">NodeJS/.NET</div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="assets/img/portfolio/fullsize/pic-data2.jpg" title="Project Name">
                <img class="img-fluid" src="assets/img/portfolio/thumbnails/pic-data2.jpg" alt="..." />
                <div class="portfolio-box-caption">
                    <div class="project-category text-white-50">Databases</div>
                    <div class="project-name">SQL/NO relational</div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="assets/img/portfolio/fullsize/pic-mobile2.jpg" title="Project Name">
                <img class="img-fluid" src="assets/img/portfolio/thumbnails/pic-mobile2.jpg" alt="..." />
                <div class="portfolio-box-caption">
                    <div class="project-category text-white-50">Mobile</div>
                    <div class="project-name">Flutter/MAUI/Kotlin</div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="assets/img/portfolio/fullsize/pic-data3.jpg" title="Project Name">
                <img class="img-fluid" src="assets/img/portfolio/thumbnails/pic-data3.jpg" alt="..." />
                <div class="portfolio-box-caption">
                    <div class="project-category text-white-50">Data analitics</div>
                    <div class="project-name">Phyton/Ruby</div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-sm-6">
            <a class="portfolio-box" href="assets/img/portfolio/fullsize/pic-cloudsol1.jpg" title="Project Name">
                <img class="img-fluid" src="assets/img/portfolio/thumbnails/pic-cloudsol1.jpg" alt="..." />
                <div class="portfolio-box-caption p-3">
                    <div class="project-category text-white-50">Cloud solutions</div>
                    <div class="project-name">AWS / Azure / Firebase</div>
                </div>
            </a>
        </div>
    </div>
  </div>
</div>

The css is this one:

#portfolio .container-fluid {
  max-width: 1920px;
}
#portfolio .container-fluid .portfolio-box  {
  position: relative;
  display: block;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(244, 98, 58, 0.9);
  transition: opacity 0.25s ease;
  text-align: center;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category{
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name {
  font-size: 1.2rem;
}
#portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption{
  opacity: 1;
}