Olá designers hoje vou ensinar a fazer um efeito hover em uma imagem...
é bem fácil, porém demorado.
Então vamos lá:
Primeiramente crie sua imagem de como ela fica e como ficara depois que nos passarmos o mouse.
nesse estilo:
Código HTML:
No caso do meu menu a altura é 77 pixels. Em largura do item, você vai colocar a largura da imagem. No meu caso, a imagem que contém o link "Home" tem 147 pixels de largura. E por último, em nome do item, coloque o nome do link, por exemplo "home".
é bem fácil, porém demorado.
Então vamos lá:
Primeiramente crie sua imagem de como ela fica e como ficara depois que nos passarmos o mouse.
nesse estilo:
Assim Ficará como normalmente!! |
Assim quando o mouse estiver em cima |
Esse código a seguir você coloca em Layout//Adicionar Gadjet Html/Javascript.
<a href="LINK_DO_ITEM"><img src="http://i49.tinypic.com/e5h5dt.jpg" height="ALTURA DO ITEMpx" width="LARGURA DO ITEMpx" class="NOME DO ITEM"></a>Você vai alterar apenas as partes destacadas do código. Em link do item você vai colocar o link que deseja que abra quando clicarem no primeiro nome. Em altura do item, você irá colocar a altura das imagens do menu.
No caso do meu menu a altura é 77 pixels. Em largura do item, você vai colocar a largura da imagem. No meu caso, a imagem que contém o link "Home" tem 147 pixels de largura. E por último, em nome do item, coloque o nome do link, por exemplo "home".
Você vai repetir esse código para cada link do menu, então faça isso com bastante atenção. Quando terminar, salve o gadget. Ainda não vai aparecer nada no seu blog.
Código CSS:
Agora é a segunda parte do código. Vá no html do seu blog, e cole o código abaixo, antes de ]]></b:skin>
.NOME DO ITEM {
background: transparent url('IMAGEM') no-repeat bottom center;
width: LARGURA DO ITEMpx;
height: ALTURA DO ITEMpx;
margin-left: 0px;
}
.NOME DO ITEM:hover {
background: transparent url('IMAGEM HOVER') no-repeat top center;
width: LARGURA DO ITEMpx;
height: ALTURA DO ITEMpx ;
}
Em imagem, você vai colocar o link da imagem que fica normalmente e em Imagem Hover como ela ficara depois que o mouse estiver em cima. No restante dos campos, você deve colocar as mesmas informações que colocou no código anterior, principalmente o "nome do item" que deve ser o mesmo que você colocou no código anterior. Em margin-left, você ajusta as margens caso as imagens fiquem com espaços de umas para as outras.
Qualquer Dúvida relate no comentário, Irei atender.
~Gcl
Qualquer Dúvida relate no comentário, Irei atender.
~Gcl
Não entendi: A metade da altura do item?!
ResponderEliminarE a imagem normal deve estar junto com a do efeito hover, não é? Devia ter um modelo.
onde eu acho o html para fazer isso? O html para fazer blog
ResponderEliminarVcs tem um tutorial completo com sidebar cabeçalho rodape e tudo mais?
ResponderEliminaro link da imagem é a mesma coisa que URL?
ResponderEliminarnao da para copiar o html e colar la
ResponderEliminar