User:TheMcr/common.js: Difference between revisions

Revision as of 23:04, 1 April 2025

document.addEventListener('DOMContentLoaded', function () {
    // Handle images
    var images = document.querySelectorAll('img'); // Select all images on the page

    images.forEach(function (image) {
        // On mouse enter (hover)
        image.addEventListener('mouseenter', function () {
            image.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';  // Smooth transition for scaling and shadow
            image.style.transform = 'scale(1.2)'; // Increase image size by 20%
            image.style.boxShadow = '0px 4px 10px rgba(0, 0, 0, 0.3)'; // Add a subtle shadow
        });

        // On mouse leave (hover out)
        image.addEventListener('mouseleave', function () {
            image.style.transform = 'scale(1)'; // Reset to original size
            image.style.boxShadow = 'none'; // Remove the shadow
        });
    });

    // Handle links
    var links = document.querySelectorAll('a'); // Select all links on the page

    links.forEach(function (link) {
        // On mouse enter (hover)
        link.addEventListener('mouseenter', function () {
            link.style.transition = 'transform 0.3s ease';  // Smooth transition for scaling
            link.style.transform = 'scale(1.2)'; // Increase link size by 20%
        });

        // On mouse leave (hover out)
        link.addEventListener('mouseleave', function () {
            link.style.transform = 'scale(1)'; // Reset to original size
        });
    });
});