[Resolvido] Onmouseover + Imagem em popup

[CookieGamerPT]

Como faço?

 

Antes de passar o cursor:

 

Após:

 

 

CSS do exemplo:

p.product a img {
    display: none;
    position: absolute;
    left: -80px;
    top: -22px;
}
p.product a {
    display: inline-block;
    position: relative;
}
p.product a img{
    display: none;
}
p.product a:hover img{
    display: inherit;
}
p.product {
    margin-left: 100px;
}

Exemplo em HTML

 

<p class="product"><a href="#"><img src="http://placehold.it/64/64" alt=""/>Test</a>

A dúvida é, mudar a imagem de posição, aparece no lado esquerdo, fazer com que apareça no lado direto
E a imagem deve ficar em forma de circulo.
E exibir apenas ao passar o mouse, este é o objetivo ;-;

[Guest Dêemezeká]

<p class="product"><a href="#">Test<img src="http://placehold.it/64/64" alt=""/></a>

se vc olhar no codigo, basta colocar a palavra "Test" antes da imagem, assim ela vai aparecer do lado direito

 

-----------

pra fazer ela ficar redonda, procure por "p.product a img" no css e troque por esse codigo:

p.product a img{
    display: none;
    border-radius:100px;
}

[CookieGamerPT]

<p class="product"><a href="#">Test<img src="http://placehold.it/64/64" alt=""/></a>

se vc olhar no codigo, basta colocar a palavra "Test" antes da imagem, assim ela vai aparecer do lado direito

 

-----------

pra fazer ela ficar redonda, procure por "p.product a img" no css e troque por esse codigo:

p.product a img{
    display: none;
    border-radius:100px;
}

Obrigadu ^-^

[KroyBR]

Sua dúvida foi marcada como [Resolvido] e movido à área de dúvidas resolvidas.


Atenciosamente,
Gamer's Board