ROTATE IMAGE ON HOVER USING CSS AND JS
To rotate an image on hover using CSS and JavaScript, you can follow these steps:
HTML Structure:
First, create the HTML structure with an image element:
Program:
image.html:
#image { transition: transform 0.5s ease; } #image:hover { transform: rotate(180deg); }
Css:
document.getElementById('image').addEventListener('mouseover', function() { this.style.transform = 'rotate(180deg)'; }); document.getElementById('image').addEventListener('mouseout', function() { this.style.transform = 'rotate(0deg)'; });
This setup allows you to achieve a basic hover effect with pure CSS or add more dynamic behavior with JavaScript. Adjust the sizes, transitions, and rotation angles as per your specific design needs.