CSS3 - Imagem em onmouseover

[Pentagram666 0]

Bom dia!

Pessoal, a situação é a seguinte:

 

Criando um site para minha empresa, depois de algum tempo sem fazer nada voltado para web eu me deparei com o maravilhoso Html5 e o novo CSS3. Fiz efeitos parallax e várias firulas no meu site, ta ficando legal.

Mas... nem tudo são rosas, criei um css apenas para a FontAwesome, para usar os ícones em texto mesmo para independente da resolução que usar, mesmo no celular (bootstrap) ele iria ficar sem ter perigo de ser extendido ou ficar pixelizado de alguma forma.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
}

.fa-info:before {
content: "\f129";
}

No site funciona muito bem o código, o que eu queria era no icone de informação, quando passar o mouse em cima ele aparecer algo (uma div, uma imagem) pra colocar algumas informações (nesse caso trabalhamos com a claro e ganhamos vários premios de vendas, e gostaria de salientar isso nesse espaço).

Mas todos os exemplos que encontrei na web usam mais ou menos essa sintaxe:

#previewdaimagem{
position:absolute;
border:1px solid #ccc;
background:#fff;
padding:5px;
display:none;
color:#fff;
}

<a href="link" class="previewdaimagem" rel="images/image.jpg"></a> 

Onde class seria o css que faz ele funcionar em si. Mas eu tenho já em class a chamada do ícone do fontawesome, e se colocar display:none nela o ícone obviamente some.. e se olharem o primeiro código q eu postei vão ver que eu uso vários ícones, e fiz um código pra poder ir adicionando novos ícones conforme necessidade.

Ou seja, precisava tentar descobrir como fazer isso sem utilizar o parâmetro class dentro da sintaxe do link que é compartilhada por vários itens no site.

 

Agradeço desde já a ajuda!

[Electronic 124]

Não entendi

você esta refazendo o código do fontAwesome?

ele ja tem as classes prontas é so por a classe na tag i ex.

<i class="fa fa-info"></i>

 

agora pra aparecer a imagem quando passar o mouse no icone:

.imagem {
  display: none;
}
.ico:hover .imagem {
  display: block;
}

a .imagem precisa estar dentro de de .ico

[Pentagram666 0]

Electronic, obrigado pela resposta tão rápida ^_^

 

Bom, eu quero abrir a imagem claro.jpg de 500x500 quando passar por cima desse fa fa-info.

O código dessa parte segue abaixo:

<div class="clientes-overlay">
                   <h3>Claro</h3>
                          <span>Telêfonia Fixa,  Móvel e TV por assinatura</span>
                          <ul class="social">
                              <li><a href="#" class="fa fa-facebook"></a></li>
                              <li><a href="#" class="fa fa-twitter"></a></li>
                              <li><a href="#" class="fa fa-info"></a></li>

Dentro do CSS do FontAwesome eu setei o tamanho dos icones, cor que eu queria, coloquei anti serrilhado e outras frescuras, mas eu to voltando a desenvolver pra web e ainda to meio perdido em algumas coisas. Devo colocar no CSS a linha de código que me passou, correto? Como eu digo pro código que aquele 'icone' em específico vai abrir a imagem foco, se cada um das fa fa-info vai ter sua própria imagem/div pra exibir do lado quando passar o mouse?

[Electronic 124]

.imagem {
display: none;
}
.fa-info:hover .imagem {
display: block;
}

no caso a .imagem precisa estar dentro de de <a>

[Pentagram666 0]

Beleza, até ai tudo bem, mas lá na pagina ficaria assim?

<div class="clientes-overlay">
<h3>Claro</h3>
<span>Telêfonia Fixa, Móvel e TV por assinatura</span>
<ul class="social">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-info:claro.jpg"></a></li>

[Electronic 124]

nao

<li><a href="#" class="fa fa-info:claro.jpg"></a></li>

assim

<li> <a href="#" class="fa fa-info">de<img src="claro.jpg"></a></li>

 

so altera o css que passei

.fa img {
  display: none;
}
.fa-info:hover img {
  display: block;
}

[Pentagram666 0]

Bem, não consegui.

Vamos ver se descubro o erro.

 

Lá onde eu quero por o código testei apenas

<li> <a href="#" class="fa fa-info"><img src="claro.jpg"></a></li>

e também assim

<li> <a href="#" class="fa fa-info"><img src="claro.jpg" class="fa fa-img"></a></li>

mas não apareceu a imagem ao passar o mouse.

css tá assim:

.fa img {
display:none;
}
.fa-info:hover img {
content: "\f129";
display:block;
}

Alguma sugestão? Não faço ideia do que possa estar errado. Testei também o primeiro CSS como fa-img já que o restante tem traço mas não parece ter feito diferença.

[Electronic 124]

Eu postei isso :

.fa img {
  display: none;
}
.fa-info:hover img {
  display: block;
}

mas vc ta fazendo assim:

.fa img {
display:none;
}
.fa-info:hover img {
content: "\f129";
display:block;
}

pra que esse content: "\f129";?? se a imagem claro.jpg vai aparecer ?

[Pentagram666 0]

Content seria o icone em unicode da fonte fontawesome, talvez seja mais simples por algo por fora q tenha essa opção não? como algo assim (fiz só pra tentar expressar minha ideia):

<i class="fa-img" src="claro.jpg"><li><a href="#" class="fa fa-info"></a></li></i>

[Electronic 124]

Cara já dei a resposta

esta fazendo diferente do exemplo que passei

não sei o que vc esta procurando

 

é isso

<li> <a href="#" class="fa fa-info">de<img src="claro.jpg"></a></li>

mais isso

.fa img {
  display: none;
}
.fa-info:hover img {
  display: block;
}

se ainda nao entendeu veja aqui

http://codepen.io/anon/pen/MwNLOB