28.9.12

Tutorial imagem igual a do meu menu lateral

Oi minna tudo bem ?
Então hoje a Flavi-chan e o Byel-kun me pediram um tutorial,sabe o meu menu lateralEntão ele tem um gif e quando passa o mouse por cima ela aparece uma frase neh?Então hoje eu vou postar como faze-lo funcionar.Eu não lembro de quem era de que eu peguei mas acho q foi do Kawaii World
Bom vamos lá



Procure inicialmente por ]]><b:skin>;
A cima dele cole
figure {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0 10px 10px 0;
  -moz-transition: all 0.6s ease;
}
figcaption {
  position: absolute;
margin-bottom: 10px;
  background:transparent;
  background-color: transparent;
  color: /*coloque aqui a cor da letra\*;
  padding: 3px 3px;
  opacity: 0;
  -webkit-transition: all 0.8s ease;
  -moz-transition:    all 0.8s ease;
  -o-transition:      all 0.8s ease;
}
figure:hover figcaption {
  opacity: 0.9;
}
figure:before {
  content: "?";
  position: absolute;
  font-weight: 800;
  background: */aqui a cor da bolinha\*;
  background:*/aqui a cor da bolinha\*;
  text-shadow: 0 0 5px white;
  color: #FFF;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.6s ease;
  opacity: 0.75; }
figure:hover:before {
  opacity: 0;
}
.cap-left:before {  bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

E salve para usar e só colocar o código abaixo

<figure class="cap-left">
<img alt="" height="225" src="url da imagem" width="400" />
<figcaption>texto</figcaption>
</figure>


Texto que você vai usar.Coloque então no local onde desejar que a imagem aparece.Mas lembre-se mude apenas aonde esta em vermelho
Bom é isso bye bye

6 comentários:

Vai comentar? Muito obrigada, vai fazer uma louca feliz.
Mas antes temos umas regrinhas
♠- Apesar de eu falar palavrões, e de mais da conta, por favor se contenham com os palavrões também
♥- O Eternamente Otaku, e eu, Karin, adoramos novos rostinhos por aqui. Por isso não se acanhem em querer comentar.
♦- Eu respondo os comentários, as vezes demora um tempo, mas eu sempre respondo.
♣- Tua opinião é essencial para o blog. Mas claro, que espero que você tenha educação.
♠- Aceitos tags.
♥- Comente seu link no blog, mas recomendo que tenha cuidado, o google pode considerar spam.
♦- "Seguindo, segue?" Vou pensar ¬¬
Obrigada por comentar ♥