Как создать эту анимацию с помощью CSS или JQuery?

Question

У меня есть некоторые HTML выглядят следующим образом:

<div class="translate-bar"> 
    <div class="icon"> 
    <img src="images/translator-icon.png"> 
    </div> 
    <div class="contents">   
    <p>tranlate contents</p> 
    </div> 
</div> 

Используя эту Разметку, я хотел сделать анимацию с помощью CSS. Анимация означает, что я позиционировал «translate-bar» с absolute и right:0.

Затем мне нужно отобразить только изображение «значок» в браузере, а затем, когда пользователь нажимает или нажимает курсор мыши на значке DIV, тогда мне нужно заполнить «содержимое» DIV. Значок и содержимое DIVs отображаются в строке.

Я попробовал это с CSS transition. но я не мог понять этого.

Мой CSS:

.translate-bar { 
    position: absolute; 
    right: 0; 
    z-index: 9999; 
    display: table; 
} 

.icon { 
    height: 50px; 
} 

img { 
    width: 50px; 
} 

.contents { 
    display: table-cell; 
    vertical-align: middle; 
    background: #ebebeb; 
} 

Answer 1

Это, как я сделал это, изменив код CSS:

.contents { 
    display: table-cell; 
    vertical-align: middle; 
    background: #ebebeb; 
    visibility:hidden; 
} 
.icon:hover + .contents { visibility: visible; } 

взглянуть на this JSFiddle demo here