Article Categories

Selected Reading

Making an image scale mouse over on HTM5

Javascript Web Development Front End Scripts

To make an image scale on mouse over in HTML5, you can use CSS transforms or Canvas API. Here we'll show both approaches for creating smooth scaling effects.

Method 1: Using CSS Transform (Recommended)

The simplest approach uses CSS transform: scale() with :hover pseudo-class:

<!DOCTYPE html>
<html>
<head>
    <style>
        .scalable-image {
            width: 200px;
            height: 200px;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        
        .scalable-image:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <img src="/images/sample.jpg" alt="Scalable Image" class="scalable-image">
</body>
</html>

Method 2: Using JavaScript Event Listeners

For more control, use JavaScript to handle mouse events:

<!DOCTYPE html>
<html>
<head>
    <style>
        .js-scalable {
            width: 200px;
            height: 200px;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img id="scalableImg" src="/images/sample.jpg" alt="JS Scalable" class="js-scalable">
    
    <script>
        const img = document.getElementById('scalableImg');
        
        img.addEventListener('mouseover', function() {
            this.style.transform = 'scale(1.3)';
        });
        
        img.addEventListener('mouseout', function() {
            this.style.transform = 'scale(1)';
        });
    </script>
</body>
</html>

Method 3: Using HTML5 Canvas

For advanced effects, use Canvas API to redraw the image at different scales:

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid black;"></canvas>
    
    <script>
        const canvas = document.getElementById('myCanvas');
        const context = canvas.getContext('2d');
        const img = new Image();
        
        img.onload = function() {
            display(); // Draw initial image
        };
        img.src = '/images/sample.jpg';
        
        function display() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(img, 50, 50, 200, 150);
        }
        
        function scaleImage() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.drawImage(img, 25, 25, 250, 200); // Larger size
        }
        
        canvas.addEventListener('mouseover', scaleImage);
        canvas.addEventListener('mouseout', display);
    </script>
</body>
</html>

Comparison

Method	Performance	Ease of Use	Browser Support
CSS Transform	Excellent	Very Easy	Modern browsers
JavaScript Events	Good	Easy	All browsers
Canvas API	Good	Complex	HTML5 browsers

Key Points

CSS transforms provide the smoothest performance using GPU acceleration
JavaScript gives more control over scaling behavior
Canvas is useful when you need pixel-level manipulation
Always include transition for smooth scaling effects

Conclusion

CSS transforms with :hover provide the best performance for simple image scaling. Use JavaScript events for dynamic control or Canvas for advanced image manipulation effects.

Samual Sam

Updated on: 2026-03-15T23:18:59+05:30

369 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next