Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="nav-wrapper">
            <div class="left">
                <div class="nav-link-wrapper">
                    <a href="index.html">Home</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="about.html">About</a>
                </div>
            </div>
            <div class="right">
                <div class="brand">
                    <div>SZABÓ ROLAND</div>
                </div>
            </div>
        </div>
        <div class="content-wrapper">
            <div class="portfolio-items-wrapper">

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(Images/Dirt.jpg)">

                    </div>

                    <div class="img-text-wrapper">
                        <div class="logo-wrapper">

                        </div>
                        <div class="subtitle">
                            Napelem Rendszerek

                        </div>
                    </div>

                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(Images/Tools.jpg)"></div>

                    <div class="img-text-wrapper">
                        <div class="logo-wrapper">

                        </div>
                        <div class="subtitle">
                            Ingatlanok
                        </div>
                    </div>

                </div>

                <div class="portfolio-item-wrapper">
                    <div class="portfolio-img-background" style="background-image:url(Images/Water.jpg)"></div>

                    <div class="img-text-wrapper">
                        <div class="logo-wrapper">

                        </div>
                        <div class="subtitle">
                            Kertek és nyaralók
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</body>
<script>
    const porfolioItems = document.querySelectorAll('.portfolio-item-wrapper')
     porfolioItems.forEach(porfolioItem => {
         porfolioItem.addEventListener('mouseover', () => {
            porfolioItem.childNodes[1].classList.add('img-darken')
         })
         porfolioItem.addEventListener('mouseout', () => {
            porfolioItem.childNodes[1].classList.remove('img-darken')
         })
     })
</script>
</html>