Post
Ask Question

Hover Effect in HTML

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    
  26.     
  27.                 <img src="image.jpg(HERE WE ENTER THE LOCATION OF THAT IMAGE)"/>  
  28.             </div>  
  29.         </body>  
  30.     </html>    
Next Recommended Reading Accordion Using HTML 5