Развернуть логотип с половины

Зачем использовать jQuery, если это можно сделать с помощью 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: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 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 to put the icon on the top */
    position:absolute;
    z-index:10;
    /* CSS Transitions */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#icon-wrapper p{
    color:black;
    font-size:35px;
    font-family:arial, helvetica;
    /* Fixed width and float left is needed */
    width:200px;
    float:left;
}

Это долго, но без использования jQuery - плюс. Обратите внимание, что нам нужно использовать фиксированную ширину для элементов, особенно для абзаца.

UPDATE: для прозрачного значка сначала нужно скрыть текст, используя opacity: 0 ;. Затем добавьте CSS Transition, чтобы мы плавно влияли на зависание. Наконец, покажите текст при наведении с непрозрачностью: 1 ;. Но этот трюк имеет ошибку, иногда текст не "спрятался" быстро, поэтому он все еще отображается какое-то время в значке. Лучшим решением является добавление цвета фона в значок, используя тот же цвет, что и фон контейнера.

Обновленный CSS (прозрачный текст):

#icon-wrapper:hover p{
    opacity:1;
}

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

Обновлен CSS (с использованием цвета фона на значке):

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

Вот jsFiddle

Вот обновленная скрипка для прозрачного значка.

Вот обновленная скрипка с цветом фона, добавленным к значку.

Не уверен, что это то, что вы хотите.

Проверьте демо: http://jsfiddle.net/SdanM/4/

HTML:

<div id="container">    
    <div id="img">Hidden Element</div>
    <div id="btn">Hover to expand</div>
<div>

CSS: сначала скрыть hidden element

#container {
    position: relative;
}
#img {
    background-color: yellow;
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50px;
    left: 50px;
    display: none;
}

#btn {
    background-color: red;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50px;
    left: 50px;
}

jQuery: перемещать блоки

$("#container").mouseenter( function() {
    $("#img").animate({
        left: "-=50",
        width: "show",
    }, 1000);

    $("#btn").animate({
        left: "+=50",
    }, 1000);
});

$("#container").mouseleave( function() {
    $("#img").animate({
        left: "+=50",
        width: "hide",
    }, 1000);

    $("#btn").animate({
        left: "-=50",
    }, 1000);
});