Barra vertical personalizada

• Descrição:

Boa tarde de novo, eu estou com muitas dúvidas, então vou postando aqui, visto que tudo num tópico fica um pouco bagunçado.

Bem eu tenho barra vertical lá no meu fórum, o que eu queria era que quando o mouse passasse lá, abri-se uma espécie de uma aba... Eu editei aqui uma imagem pra perceber melhor.

Sem passar lá: https://2img.net/h/s3.postimg.cc/fh3u3zivn/Ajuda_3.jpg
Passando lá: https://2img.net/h/s17.postimg.cc/7q8jhl1pb/Ajuda_4.jpg

Não importa se o código for preciso 2 imagens, 3, eu posso faze-las, se for só precisso 1 melhor, só preciso dos tamanhos pra fazer.

Muito obrigado

• Informações:

Código:


#i_icon_mini_index:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o primeiro ícone referente ao inicio(A casa!)*/
}
#i_icon_mini_portal:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente ao portal(O tablet!)*/
}
#i_icon_mini_calendar:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente ao calendário(O calendário, avá ¬¬!)*/
}
#i_icon_mini_faq:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente a FAQ(O livro!)*/
}
#i_icon_mini_search:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente a pesquisa(A lupa!)*/
}
#i_icon_mini_members:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente a lista de membros(As "pessoinhas"!)*/
}
#i_icon_mini_register:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente ao registro(A folha com o lápis, ou sei la oque!)*/
}
#i_icon_mini_login:hover{
  content: url(URL_DA_IMAGEM);/*Aqui é o referente ao login(A porta com uma seta verde!)*/
}


Código:

#i_icon_mini_portal:hover {
content: url(http://i39.servimg.com/u/f39/18/53/20/49/portal11.png);
margin-left: -50px;
}