Post
Ask Question

Hover Effect in HTML

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