How to enlarge a div panel on mouse over using css

                                                      In web designing there lots of styles can be applied to div panel for create a better user friendly site. By using css styles to div panel we can enlarge the div panel and its contents. if we place a picture in the div panel on the mouse over the picture and div panel are enlarging.   We can define the amount of enlarging dimension in the code also we can change the color of the enlarging div panel on the mouse over.

Before mouse over                                                          Aftermouse over


* copy the below code and paste it in the head section.

<style type="text/css">
 #submenu
 {
        background-color: #eee;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
         transition: all 1s ease-in-out;
 }
   #submenu:hover
  {
        background-color: #fc3;
       -webkit-transform:  scale(2);
       -moz-transform:  scale(2);
       -o-transform:  scale(2);
      -ms-transform:  scale(2);
       transform:  scale(2);
   }
   </style>

* create a div and call the id as submenu

<div id="submenu"  style="width:100px; height:100px;" align="center" ><img src="image url"/></div>