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
Gostei do tutorial, achei perfeito a forma que ficam as imagens da barra lateral ao passar o mouse por cima ^^
ResponderExcluirAbraços,
Revolução Nerd
Arigato gozaimasu
ExcluirBrigada B-Chan..
ResponderExcluirisso realmente me ajudou muito..
Yokata q consegui lhe ajudar
ExcluirHey,posta estilos de menus?
ResponderExcluirclaro q posto
ExcluirQuer um em especial?