Here I use hover effect in Html & Css. In the code I use CSS and HTML. I make a class in CSS with "grow img" name and then I apply hover effect on that class (.grow img:hover).
Initially image size is 100px but when we mouse hover on that image then it became 300px. In the CSS -webkit is used for hover effect in google chrome browser, -moz is used for hover effect in mozilla firefox & -o is used for hover effect for opera browser.
Code
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <html>
- <head>
- <style>
- .grow img
- {
- height: 100px;
- width: 100px;
- -webkit-transition: all 1s ease;
- -moz-transition:all 1s ease;
- -o-transition:all 1s ease;
- transition:all 1s ease;
- }
- .grow img:hover
- {
- width: 300px;
- height: 300px;
- }
- </style>
- <title>grow image</title>
- </head>
- <body>
- <div class="grow img">
- <img src="image.jpg(HERE WE ENTER THE LOCATION OF THAT IMAGE)"/>
- </div>
- </body>
- </html>