title: How to zoom out Html element?
body: <p>I am trying to create cloud tags  in html.I am able to create them using ul tag  and applying css on them.Following is my cloud tag image:</p>
  
  <p><img src="https://i.stack.imgur.com/PkEAp.png" alt="enter image description here"> </p>
  
  <p>Now i want effects like that, when i move my mouse to any of the text(i.e any cloud tag),say "Learn java" tag it should zoom out and when i move my mouse out of it it should go back to its place. I have seen this functionality on many websites.
  following is my code in HTML file :</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
    $("#java").hover(function(){
      alert("You entered on java cloud tag!");
      },function); 
  });
  &lt;/script&gt;
  &lt;title&gt;Css Globe: tag clouds&lt;/title&gt;
  &lt;style&gt;
  
  body {
      margin:0;
      padding:0;
      background:#e1e1e1;
      font:80% Trebuchet MS, Arial, Helvetica, sans-serif;
      color:#555;
      line-height:180%;
  }
  a{color:#3c70d0;}
  h1{
      font-size:180%;
      font-weight:normal;
      margin:0 20px;
      padding:1em 0;
      }
  h2{
      font-size:160%;
      font-weight:normal;
      }   
  h3{
      font-size:140%;
      font-weight:normal;
      }   
  img{border:none;}
  pre{
      display:block;
      font:12px "Courier New", Courier, monospace;
      padding:10px;
      border:1px solid #bae2f0;
      background:#e3f4f9; 
      margin:.5em 0;
      width:500px;
      }   
  
  #container{
      margin:0 auto;
      text-align:left;
      width:700px;
      background:#fff;
      }
  #main{
      float:right;
      display:inline;
      width:380px;
      margin-left:20px;   
      }
  #side{
      float:left;
      display:inline;
      width:260px;
      margin-left:20px;
      }   
  #footer{
      clear:both;
      padding:1em 0;
      margin:0 20px;
      }
  
  
  /* Tag cloud */
  
      .tags ul{
          margin:1em 0;
          padding:.5em 10px;
          text-align:center;
          background:#71b5e9 url(bg_tags.gif) repeat-x;       
          }
  
          .cld{
              height:100px;
              width:400px;
          }
      .tags li{
          margin:0;
          padding:0;
          list-style:none;
          display:inline;
          }
      .tags li a{
          text-decoration:none;
          color:#fff;
          padding:0 2px;  
          }
      .tags li a:hover{   
          color:#cff400;
          }       
  
      .tag1{font-size:100%;}
      .tag2{font-size:120%;}
      .tag3{font-size:140%;}
      .tag4{font-size:160%;}
      .tag5{font-size:180%;}
  
      /* alternative layout */
  
      .tags .alt{
          text-align:left;
          padding:0;
          background:none;
          }
      .tags .alt li{
          padding:2px 10px;
          background:#efefef;
          display:block;
          }
      .tags .alt .tag1, 
      .tags .alt .tag2, 
      .tags .alt .tag3, 
      .tags .alt .tag4, 
      .tags .alt .tag5{font-size:100%;}
      .tags .alt .tag1{background:#7cc0f4;}
      .tags .alt .tag2{background:#67abe0;}
      .tags .alt .tag3{background:#4d92c7;}
      .tags .alt .tag4{background:#3277ad;}
      .tags .alt .tag5{background:#266ca2;}
  
  /* // Tag cloud */
  
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;  &lt;!--******************************************************************************--&gt;&gt;
  
  &lt;div id="container"&gt;    
  
  
  
  
      &lt;script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"&gt;&lt;/script&gt;
  
  
  
      &lt;div id="side"&gt;
  
          &lt;h2&gt;Side column (Tag Cloud)&lt;/h2&gt;
  
          &lt;div class="tags"&gt;
              &lt;ul class="cld"&gt;
                  &lt;li class="tag1" id="java"&gt;&lt;a href="https://www.google.com"&gt;Learn java&lt;/a&gt;&lt;/li&gt; 
                  &lt;li class="tag2"&gt;&lt;a href="#"&gt;Find Markets&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag3"&gt;&lt;a href="#"&gt;sitemap&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag2"&gt;&lt;a href="#"&gt;Sales&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag4"&gt;&lt;a href="#"&gt;Gohome&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag1"&gt;&lt;a href="#"&gt;Movies&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag1"&gt;&lt;a href="#"&gt;It Jobz&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag5"&gt;&lt;a href="#"&gt;Gym&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag2"&gt;&lt;a href="#"&gt;Sea food&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag1"&gt;&lt;a href="#"&gt;Hospital&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag3"&gt;&lt;a href="#"&gt;Smart phone&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag4"&gt;&lt;a href="#"&gt;Pizza &lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag1"&gt;&lt;a href="#"&gt;Aerobics&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag5"&gt;&lt;a href="#"&gt;Electronics&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag1"&gt;&lt;a href="#"&gt;Anti-Virus&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="tag2"&gt;&lt;a href="#"&gt;Travel&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>,So please give some solution to achive this.
  Thank you in advance.</p>