Hover Effect in HTML

Here I use the 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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <html>
  5. <head>
  6. <style>
  7. .grow img
  8. {
  9. height: 100px;
  10. width: 100px;
  11. -webkit-transition: all 1s ease;
  12. -moz-transition:all 1s ease;
  13. -o-transition:all 1s ease;
  14. transition:all 1s ease;
  15. }
  16. .grow img:hover
  17. {
  18. width: 300px;
  19. height: 300px;
  20. }
  21. </style>
  22. <title>grow image</title>
  23. </head>
  24. <body>
  25. <div class="grow img"> // here i use css class
  27. <img src="image.jpg(HERE WE ENTER THE LOCATION OF THAT IMAGE)"/>
  28. </div>
  29. </body>
  30. </html>