Avatar dos comentários com efeito hover

4 de out de 2013

Oioie gente *-* ain falta apenas 10 diazinhos pro meu niver-18 aninhos ahaha .Aceito presentes tá?
Bom hoje vim ensinar a deixar os avatares dos comentaários com efeito hover ahaha

Abra seu editor de html, e aperte Ctrl + F ou F3, tanto faz, e procure por: /* Comments
Depois, dentro dessa tag, procure por: .comments .avatar-image-container {
Apague tudo referente ao avatar (código acima) e cole esse código aqui:


.comments .avatar-image-container { /*Imagem da pessoa que comenta*/
max-width: 40px; /*Tamanho da imagem do comentador. */
max-height: 40px; /*Tamanho da imagem do comentador. */
min-height: 40px; /*Tamanho da imagem do comentador. */
min-width: 40px; /*Tamanho da imagem do comentador, repita o mesmo número sempre */
background: #e56e70; /*Cor da borda da imagem*/
padding: 1px; /*Grossura da borda da imagem*/
}
.comments .avatar-image-container:hover{ /*Imagem da pessoa que comenta ao passar o mouse*/
max-width: 40px; /*Tamanho da imagem do comentador. */
max-height: 40px; /*Tamanho da imagem do comentador. */
min-height: 40px; /*Tamanho da imagem do comentador. */
min-width: 40px; /*Tamanho da imagem do comentador, repita o mesmo número sempre */
background: #af4896; /*Cor da borda da imagem*/
padding: 2px; /*Grossura da borda da imagem*/
-webkit-animation: cssAnimation 0.1257s 16 ease; /*Não mude nada daqui pra baixo*/
-moz-animation: cssAnimation 0.1257s 16 ease;
-o-animation: cssAnimation 0.1257s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(0deg) scale(0.872) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(0deg) scale(0.872) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(0deg) scale(0.872) skew(1deg) translate(0px); }
}
.comments .avatar-image-container img{
max-width: 40px; /*Tamanho do avatar. */
max-height: 40px; /*Tamanho do avatar. */
min-height: 40px; /*Tamanho do avatar. */
min-width: 40px; /*Tamanho do avatar, repita o mesmo número sempre.*/
}
Modifique as cores, as bordas e o tamanho da imagem. Já está tudo explicado.
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!