Live
x
<html><head> <title>mouseover and mouseout demo</title> <style> </style></head><body> <p>Enlarge photo by hovering over the image and return it to it's normal size by leaving the image</p> <img class="img" src="https://images.unsplash.com/photo-1546768292-fb12f6c92568?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" /></body></html>
Live
xxxxxxxxxx5
img { width: 100px; height: 100px; cursor: pointer; }
Live
xxxxxxxxxx11
var image = document.querySelector('.img'); image.addEventListener('mouseover', function () { image.style.width = '150px'; image.style.height = '150px'; }); image.addEventListener('mouseout', function () { image.style.width = '100px'; image.style.height = '100px'; });
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.