javascript - Expand the logo from a half -

has idea if can in jquery? clicking on piece of logo expands rest? example image:

why use jquery if can achieved using css?

html:

<div id='icon-wrapper'>   <img id='icon' alt='icon' src='http://i.stack.imgur.com/skhjf.jpg?s=60&g=1'/>   <p>text here</p> </div> 

css:

#icon-wrapper{      margin:0 auto;     height:110px;     width:110px;     overflow:hidden;     /* css transitions */     -webkit-transition: 1s ease;     -moz-transition: 1s ease;     -ms-transition: 1s ease;     -o-transition: 1s ease;     transition: 1s ease; } #icon-wrapper:after{     content:"";     display:block;     width:100%;     clear:both; } #icon-wrapper:hover{     width:300px; } #icon-wrapper:hover #icon{     margin-left:200px; } #icon{     -webkit-border-radius: 100%;     -moz-border-radius: 100%;     border-radius: 100%;     /* position absolute put icon on top */     position:absolute;     z-index:10;     /* css transitions */     -webkit-transition: 1s ease;     -moz-transition: 1s ease;     -ms-transition: 1s ease;     -o-transition: 1s ease;     transition: 1s ease; } #icon-wrapper p{     color:black;     font-size:35px;     font-family:arial, helvetica;     /* fixed width , float left needed */     width:200px;     float:left; } 

it's long without using jquery plus point. note need use fixed width elements, paragraph.

update: transparent icon, need hide text first, using opacity:0;. add css transition have smooth effect on hover. finally, show text on hover opacity:1;. trick has bug, text didn't 'hide' fast, it's still shown time in icon. best solution adding background color icon, using same color container background.

updated css (transparent text):

#icon-wrapper:hover p{     opacity:1; }  #icon-wrapper p{     /* ... */     opacity:0;     -webkit-transition: 2s ease-in;     -moz-transition: 2s ease-in;     -ms-transition: 2s ease-in;     -o-transition: 2s ease-in;     transition: 2s ease-in; } 

updated css (using background color on icon):

#icon{     /* ... */     background:white; } 

here jsfiddle

here updated fiddle transparent icon.

here updated fiddle background color added icon.