title: CSS square to circle fade animation
body: <p>I'm trying to make in CSS a fade from square to a circle using the hover effect. My code if like this but the fading doesn't apply. Can someone please tell me if it's possible, I am pretty sure it can be done but I'm not doing it correctly:</p>
  <pre><code>   #tab1{
  float:left;
  width:50px;
  height:50px;
  background-color:#ff0000;
  left:0;
  }
  
  #tab1h{
  background-color:#ff0000;
  width:50px;
  height:50px;
  visibility:none;
  position: relative;
  opacity: 0;
  border-radius:50%;
  transition: 1s linear, opacity 0.5s linear;
  -webkit-transition: visibility 1s linear, opacity 0.5s linear; 
  -moz-transition: visibility 1s linear, opacity 0.5s linear;
  -o-transition: visibility 1s linear, opacity 0.5s linear;
  }
  #tab1:hover &gt; #tab1h {
  visibility:visible;
  float:left;
  opacity:1;
  border-radius:50%;
  }
  
          #container{
          text-align:left;
          width:100%;
          height:100%;
          position:absolute;
          }
      
          &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
          &lt;html&gt;
          &lt;head&gt;
          &lt;title&gt;Free Css Layout&lt;/title&gt;
          &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /&gt;
          &lt;/head&gt;
          &lt;body&gt;
          &lt;div id=&quot;container&quot;&gt;
          &lt;div id=&quot;header&quot;&gt;
              &lt;div id=&quot;headerl&quot;&gt;
                  Title
                  &lt;/div&gt;
                  &lt;div id=&quot;headerr&quot;&gt;
                      &lt;div class=&quot;showF&quot;&gt;
                          &lt;img src=&quot;img/fico.png&quot; width=&quot;35px&quot; height=&quot;35px&quot;/&gt;
                      &lt;div class=&quot;hideF&quot;&gt;
                          &lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fana.gemescu&amp;amp;width&amp;amp;layout=standard&amp;amp;action=like&amp;amp;show_faces=true&amp;amp;share=true&amp;amp;height=80&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden; height:80px;&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id=&quot;navigation&quot;&gt;
                  &lt;a href=&quot;index.html&quot;&gt;
                      &lt;div id=&quot;tab1&quot;&gt;
                          &lt;div id=&quot;tab1h&quot;&gt;
                          Home
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
       &lt;/div&gt;
      
              &lt;div id=&quot;content&quot;&gt;
              &lt;div&gt;
                &lt;h1&gt;&lt;strong&gt;Contact Me.&lt;/strong&gt;&lt;/h1&gt;
                  For any information please fill the form below to contact me! &lt;br/&gt;
                  Thank you!
                  &lt;form method=&quot;post&quot; style=&quot;margin-top:10%;&quot;&gt;
                          &lt;label for=&quot;Name&quot;&gt;Name:&lt;/label&gt;
                          &lt;input type=&quot;text&quot; name=&quot;Name&quot; id=&quot;Name&quot; /&gt;&lt;/br&gt;
                          
                          &lt;label for=&quot;Email&quot;&gt;Email:&lt;/label&gt;
                          &lt;input type=&quot;text&quot; name=&quot;Email&quot; id=&quot;Email&quot; /&gt;&lt;/br&gt;
                          
                          &lt;label for=&quot;Message&quot;&gt;Message:&lt;/label&gt;&lt;br /&gt;
                          &lt;textarea name=&quot;Message&quot; rows=&quot;10&quot; cols=&quot;20&quot; id=&quot;Message&quot;&gt;&lt;/textarea&gt;
          
                          &lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Submit&quot; class=&quot;submit-button&quot; /&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
             &lt;/div&gt;
            &lt;div id=&quot;footer&quot;&gt;
              &lt;p&gt;copywrite&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  <p>And also updated the container that holds the element.</p>