Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Samwel Sennen

[Resolvido] Criando link (estilo Baixaki)

Por , em Desenvolvimento frontend

Recommended Posts

Samwel Sennen    0

Samwel Sennen
Postado

Ola, gostaria de saber como faz esse link estilo baixaki, em que possue por exemplo uma imagem e um tituro com fonte grande e um texto explicativo pequeno, que ao passar mouse mude as cores dos tres para laranja como no exemplo usando css. Outro detalhe que tambem gostaria de saber era como fazer com que o link nao fique somente no texto e sim em um certo campo cobrindo tudo.

 

41827864.jpg

Assim fica sem passar o mouse.

 

38513963.jpg

Ao passar o mouse a cor muda tanto do texto como da imagem.

 

42029759.jpg

Essa é a area que ao passar o mouse ativa o link. obs: mesmo selecionando fora do texto, mais dentro da area fantasia o link funciona.

 

Como fazer esse css?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nandel    1

Nandel
Postado

Então colega eu fiz bem simples aqui.... voce tera de adaptar a sua necessidade.

 

<html>
<head>
<style>
<!--
/* Formatação geral */
a {
display:block; /* torna o background quando ativo homogeneo */
text-decoration:none;
}
a h1 {
color:#000;
font-size:20px;
}
a p {
color:#666;
font-size:12px;
}
a img { border:0px; }
/* Formatação mouse sobre */
a:hover h1 {
color:#900;
font-size:20px;
}
a:hover p {
color:#900;
font-size:12px;
}
a:hover img { border:3px solid #900; }
/* Formatação click */
a:active { background:#ccc; }
a:active h1 {
color:#900;
font-size:20px;
}
a:active p {
color:#900;
font-size:12px;
}
a:active img { border:3px solid #900; }
-->
</style>
</head>

<body>
<a href="#">
<img src="http://forum.imasters.com.br/public/style_images/novo-imasters/imasters-logo.png">
<h1>O titulo do link</h1>
<p>O texto ou seja la oq for aqui</p>
</a>
</body>
</html>

 

////////////////////

 

Eu realmente não sou bom em explicar o código pois aprendi de forma autônoma e não sei seus nomes e tals...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Samwel Sennen    0

Samwel Sennen
Postado

Então colega eu fiz bem simples aqui.... voce tera de adaptar a sua necessidade.

 

<html>
<head>
<style>
<!--
/* Formatação geral */
a {
display:block; /* torna o background quando ativo homogeneo */
text-decoration:none;
}
a h1 {
color:#000;
font-size:20px;
}
a p {
color:#666;
font-size:12px;
}
a img { border:0px; }
/* Formatação mouse sobre */
a:hover h1 {
color:#900;
font-size:20px;
}
a:hover p {
color:#900;
font-size:12px;
}
a:hover img { border:3px solid #900; }
/* Formatação click */
a:active { background:#ccc; }
a:active h1 {
color:#900;
font-size:20px;
}
a:active p {
color:#900;
font-size:12px;
}
a:active img { border:3px solid #900; }
-->
</style>
</head>

<body>
<a href="#">
<img src="http://forum.imasters.com.br/public/style_images/novo-imasters/imasters-logo.png">
<h1>O titulo do link</h1>
<p>O texto ou seja la oq for aqui</p>
</a>
</body>
</html>

 

////////////////////

 

Eu realmente não sou bom em explicar o código pois aprendi de forma autônoma e não sei seus nomes e tals...

 

 

 

Funcionou direitinho, agora como faço para a borda ficar interna, pois quando passa o mouse ela fica externa movendo um pouco a imagem e o texto tbm, gostaria que a borda ficasse dentro para nao haver esse deslocamento.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito