User:TheMcr/monobook.js: Difference between revisions

Boobpedia - Encyclopedia of big boobs
Jump to navigationJump to search
No edit summary
No edit summary
Line 1: Line 1:
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('DOMContentLoaded', function () {
    // Handle images
     var images = document.querySelectorAll('img'); // Select all images on the page
     var images = document.querySelectorAll('img'); // Select all images on the page


    images.forEach(function (image) {
  images.forEach(function (image) {
        // On mouse enter (hover)
    // On mouse enter (hover)
        image.addEventListener('mouseenter', function () {
    image.addEventListener('mouseenter', function () {
            image.style.transition = 'transform 0.3s ease';  // Smooth transition for scaling
        image.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';  // Smooth transition for scaling and shadow
            image.style.transform = 'scale(1.25)'; // Increase image size by 10%
        image.style.transform = 'scale(1.1) translateY(-10px)'; // Grow and move up by 10px
        });
        image.style.boxShadow = '0px 10px 20px rgba(0, 0, 0, 0.3)';
  image.style.position = 'relative'; // Ensure z-index works
        image.style.zIndex = '10'; / Add a subtle shadow
    });


        // On mouse leave (hover out)
    // On mouse leave (hover out)
        image.addEventListener('mouseleave', function () {
    image.addEventListener('mouseleave', function () {
            image.style.transform = 'scale(1)'; // Reset to original size
        image.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
         });
        image.style.transform = 'scale(1) translateY(0)'; // Reset size and position
        image.style.boxShadow = 'none'; // Remove the shadow
  image.style.position = 'relative'; // Ensure z-index works
         image.style.zIndex = '0';  
     });
     });
});
});
});

Revision as of 23:35, 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.1) translateY(-10px)'; // Grow and move up by 10px
        image.style.boxShadow = '0px 10px 20px rgba(0, 0, 0, 0.3)';
  image.style.position = 'relative'; // Ensure z-index works
        image.style.zIndex = '10'; / Add a subtle shadow
    });

    // On mouse leave (hover out)
    image.addEventListener('mouseleave', function () {
        image.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
        image.style.transform = 'scale(1) translateY(0)'; // Reset size and position
        image.style.boxShadow = 'none'; // Remove the shadow
  image.style.position = 'relative'; // Ensure z-index works
        image.style.zIndex = '0'; 
    });
});

});