Efeito circle autor

3 de out de 2013

Bom o efeito fica igual o da imagem abaixo,quando coloca o mouse em cima dai aparece o que está escrito...

Primeiro, eu recomendo imagens de tamanho 50X50 mas você pode colocar outras, é só modificar no código o tamanho e colocar o tamanho de acordo com a sua imagem
Vá no seu editor de html, procure por: <b:skin> e cole abaixo dele:

/* Efeito Circle autor - WY*/
.mod {
    border-radius: 50px;
    width: 50px; /** SE QUISER MUDE **/
    height: 50px; /** SE QUISER MUDE **/
    overflow: hidden;
    display: inline-block;
    float: left;
    margin: 4px;
 }
.mod .descri {
    background: rgba(0,0,0,0.3);
    color: #fff; /** Cor da letra **/
    width: 50px; /**  SE QUISER MUDE **/
    height: 50px; /**  SE QUISER MUDE **/
    position: relative;
    top: 0px;
    border-radius: 100px;
    -webkit-transition-duration: .80s;
    -moz-transition-duration: .80s;
    -o-transition-duration: .80s;
    -ms-transition-duration: .80s;
    transition-duration: .80s;
}
.mod:hover .descri {
    top: -50px; /** Coloque o valor negativo de acordo com o tamanho da imagem **/
}
.mod img {
    display: inline-block;
    border-radius: 50px; 
background: #fff; 
}

Salve. Agora adicione um gadget Html JavaScript e cole:
<a href="LINK">
<div class="mod">
<img src="http://a.deviantart.net/avatars/i/m/imagitivespace.png?14" />
<div class="descri">NOME</div>
</div>
</a>
<a href="LINK">
<div class="mod">
<img src="http://a.deviantart.net/avatars/x/l/xleric.png?4" />
<div class="descri">NOME</div>
</div>
</a>
<a href="LINK">
<div class="mod">
<img src="http://a.deviantart.net/avatars/x/x/xxunicornxx.png?3" />
<div class="descri">NOME</div>
</div>
</a>
Créditos : ??

0 comentários :

Postar um comentário

Seu Comentários é sempre bem vindo!
Comente,opine,se expresse! Este espaço é seu!
Comentar faz parte,então por favor deixem comentários

-Todos os comentários são moderados e só ficarão disponíveis ao serem aprovados
-A área de comentários não é casa da mãe Joana,então tenha respeito.Não use palavrões,nem insultos,ofensas,agressões e baixarias;
-Não serão aceitos comentários Anônimos,comentários repetidos,e que tenham qualquer material publicitários ou de merchandising pessoal ou de benefício de terceiros
-Contatos pessoais devem ser feitos na pagina de contato.
-Não deixe links desnecessários os comentários

AVISOS:

--Blog não é Chat,respeitadas as regras ,é livre o debate dos assuntos aqui postados,Que o espaço de comentários não sirva para bate papo sobre assuntos de caráter pessoal ou estranhos ao blog
--A tentativa de clonar nomes e apelidos de outros usuários para emitir opiniões em nome de terceiros configura crime de falsidade ideológica.

Espero que tenham gostado do blog e que volte sempre!