ALET Methadologies

html

<style>
    #alet-methadologies {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }

    #alet-methadologies a {
        position: relative;
        display: block;
    }

    #alet-methadologies img {
        display: block;
        width: 100%;
        height: auto;
    }

    .alet-card__label {
        position: absolute;
        inset: auto 0 0 0;
        padding: 12px;
        color: #1d2327;
        font: 600 16px/1.2 Inter, sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.75);
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const pedagogyContainer = document.getElementById('pedagogy');
        const pedagogyImage = pedagogyContainer.querySelector('img');

        const traumaIntegrationContainer = document.getElementById('trauma-integration');
        const traumaIntegrationImage = traumaIntegrationContainer.querySelector('img');

        const teacherTrainingContainer = document.getElementById('teacher-training');
        const teacherTrainingImage = teacherTrainingContainer.querySelector('img');

        const capacityBuildingContainer = document.getElementById('capacity-building');
        const capacityBuildingImage = capacityBuildingContainer.querySelector('img');

        const theChildContainer = document.getElementById('the-child');
        const theChildImage = theChildContainer.querySelector('img');

        const communityBuildingContainer = document.getElementById('community-building');
        const communityBuildingImage = communityBuildingContainer.querySelector('img');

        const parentTrainingContainer = document.getElementById('parent-training');
        const parentTrainingImage = parentTrainingContainer.querySelector('img');

        const actionResearchContainer = document.getElementById('action-research');
        const actionResearchImage = actionResearchContainer.querySelector('img');

        const environmentContainer = document.getElementById('environment');
        const environmentImage = environmentContainer.querySelector('img');

        // Change images for the pedagogy card
        pedagogyContainer.addEventListener('mouseover', function () {
            parentTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/parent-training-dark-blue_result.webp';
            pedagogyImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/Pedagogy-dark-blue_result.webp';
            teacherTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/teacher-training-dark-blue_result.webp';
        });
        
        // Change images for the trauma integration card
        traumaIntegrationContainer.addEventListener('mouseover', function () {
            actionResearchImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/action-research-dark-green_result.webp';
            capacityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/capacity-building-dark-green_result.webp';
            communityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/community-building-dark-green_result.webp';
            environmentImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/environment-dark-green_result.webp';
            parentTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/parent-training-dark-green_result.webp';
            pedagogyImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/pedagogy-dark-green_result.webp';
            traumaIntegrationImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/trauma-integration-dark-green_result.webp';
            teacherTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/teacher-training-dark-green_result.webp';
        });
        
        // Change images for the teacher training card
        teacherTrainingContainer.addEventListener('mouseover', function () {
            pedagogyImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/Pedagogy-red_result.webp';
            teacherTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/Teacher-training-red_result.webp';
        });
        
        // Change images for the capacity building card
        capacityBuildingContainer.addEventListener('mouseover', function () {
            capacityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/capacity-building-blue_result.webp';
            communityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/community-blue_result.webp';
            teacherTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/teacher-training-blue_result.webp';
        });
        
        // Change images for the child card
        theChildContainer.addEventListener('mouseover', function () {
            actionResearchImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/action-research-pink_result.webp';
            capacityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/capacity-building-pink_result.webp';
            communityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/community-building-pink_result.webp';
            environmentImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/environment-pink_result.webp';
            parentTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/parent-training-pink_result.webp';
            pedagogyImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/pedagogy-pink_result.webp';
            theChildImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/the-child-pink_result.webp';
            traumaIntegrationImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/tracher-training-pink_result.webp';
            teacherTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/trauma-integration-pink_result.webp';
        });
        
        // Change images for the community building card
        communityBuildingContainer.addEventListener('mouseover', function () {
            capacityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/capacity-building-orange_result-1.webp';
            communityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/creating-community-orange_result-1.webp';
            parentTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/parent-training-orange_result-1.webp';
            teacherTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/teacher-training-orange_result-1.webp';
        });
        
        // Change images for the parent training card
        parentTrainingContainer.addEventListener('mouseover', function () {
            communityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/community-building-dark-pink_result.webp';
            environmentImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/environment-dark-pink_result.webp';
            parentTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/parent-training-dark-pink_result.webp';
            pedagogyImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/pedagogy-dark-pink_result.webp';
            traumaIntegrationImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/trauma-integration-dark-pink_result.webp';
        });
        
        // Change images for the action research card
        actionResearchContainer.addEventListener('mouseover', function () {
            actionResearchImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/action-research-yellow_result.webp';
            capacityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/capacity-building-yellow_result.webp';
            communityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/community-building-yellow_result.webp';
            environmentImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/environment-yellow_result.webp';
            parentTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/parent-training-yellow_result.webp';
            pedagogyImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/pedagogy-yellow_result.webp';
            traumaIntegrationImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/teacher-training-yellow_result.webp';
            teacherTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/trauma-integration-yellow_result.webp';
        });
        
        // Change images for the environment card
        environmentContainer.addEventListener('mouseover', function () {
            environmentImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/environment-green_result.webp';
            parentTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/parent-training-green_result.webp';
            traumaIntegrationImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/trauma-integration-green_result.webp';
        });

        // Call the resetAll function when mouse leaves the card
        pedagogyContainer.addEventListener('mouseout', resetAll);
        traumaIntegrationContainer.addEventListener('mouseout', resetAll);
        teacherTrainingContainer.addEventListener('mouseout', resetAll);
        capacityBuildingContainer.addEventListener('mouseout', resetAll);
        theChildContainer.addEventListener('mouseout', resetAll);
        communityBuildingContainer.addEventListener('mouseout', resetAll);
        parentTrainingContainer.addEventListener('mouseout', resetAll);
        actionResearchContainer.addEventListener('mouseout', resetAll);
        environmentContainer.addEventListener('mouseout', resetAll);

        // Reset all images to its original state
        function resetAll() {
            pedagogyImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/pedagogy-blank_result-300x300.webp';
            traumaIntegrationImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/trauma-integration-blank_result-300x300.webp';
            teacherTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/teacher-training-blank_result-300x300.webp';
            capacityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/capacity-building-blank_result-300x300.webp';
            theChildImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/the-child-blank_result-300x300.webp';
            communityBuildingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/community-building-blank_result-300x300.webp';
            parentTrainingImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/parent-training-blank_result-300x300.webp';
            actionResearchImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/action-research-blank_result-300x300.webp';
            environmentImage.src = 'https://riaanp51.sg-host.com/wp-content/uploads/2025/11/environment-blank_result-300x300.webp';
        }
    });
</script>

<div id="alet-methadologies">
    <div>
        <a href="https://riaanp51.sg-host.com/pedagogy/" id="pedagogy">
            <img src="https://riaanp51.sg-host.com/wp-content/uploads/2025/11/pedagogy-blank_result-300x300.webp"
                alt="Pedagogy" />
            <span class="alet-card__label">Pedagogy</span>
        </a>
    </div>
    <div>
        <a href="https://riaanp51.sg-host.com/trauma-integration/" id="trauma-integration">
            <img src="https://riaanp51.sg-host.com/wp-content/uploads/2025/11/trauma-integration-blank_result-300x300.webp"
                alt="Trauma Integration" />
            <span class="alet-card__label">Trauma Integration</span>
        </a>

    </div>
    <div>
        <a href="https://riaanp51.sg-host.com/teacher-training/" id="teacher-training">
            <img src="https://riaanp51.sg-host.com/wp-content/uploads/2025/11/teacher-training-blank_result-300x300.webp"
                alt="Teacher Training" />
            <span class="alet-card__label">Teacher Training</span>
        </a>

    </div>
    <div>
        <a href="https://riaanp51.sg-host.com/capacity-building/" id="capacity-building">
            <img src="https://riaanp51.sg-host.com/wp-content/uploads/2025/11/capacity-building-blank_result-300x300.webp"
                alt="Capacity Building" />
            <span class="alet-card__label">Capacity Building</span>
        </a>

    </div>
    <div>
        <a id="the-child">
            <img src="https://riaanp51.sg-host.com/wp-content/uploads/2025/11/the-child-blank_result-300x300.webp"
                alt="The Child" />
        </a>

    </div>
    <div>
        <a href="https://riaanp51.sg-host.com/community/" id="community-building">
            <img src="https://riaanp51.sg-host.com/wp-content/uploads/2025/11/community-building-blank_result-300x300.webp"
                alt="Community Building" />
            <span class="alet-card__label">Community Building</span>
        </a>

    </div>
    <div>
        <a href="https://riaanp51.sg-host.com/parent-training/" id="parent-training">
            <img src="https://riaanp51.sg-host.com/wp-content/uploads/2025/11/parent-training-blank_result-300x300.webp"
                alt="Parent Training" />
            <span class="alet-card__label">Parent Training</span>
        </a>

    </div>
    <div>
        <a id="action-research">
            <img src="https://riaanp51.sg-host.com/wp-content/uploads/2025/11/action-research-blank_result-300x300.webp"
                alt="Action Research" />
            <span class="alet-card__label">Action Research</span>
        </a>

    </div>
    <div>
        <a href="https://riaanp51.sg-host.com/environment/" id="environment">
            <img src="https://riaanp51.sg-host.com/wp-content/uploads/2025/11/environment-blank_result-300x300.webp"
                alt="Environment" />
            <span class="alet-card__label">Environment</span>
        </a>

    </div>
</div>