Codigo destas imagens de modo menu
Fórum dos Fóruns :: Atendimento ao Usuário Forumeiros :: Questões sobre códigos :: Questões resolvidas sobre HTML & BBCode
Página 1 de 1 • Compartilhe •
Codigo destas imagens de modo menu
Detalhes da questão
Endereço do fórum: https://www.criadoresdepassaros.com/
Versão do fórum: phpBB3
Descrição
Qual código usa este site neste local de exemplo na imagem o sute é esse
http://www.scbiotec.com.br/
Segue imagem de exemplo

Este menu com imagem com links ,
EDU2010- Membro do Fórum
-
Inscrito dia : 09/12/2010
Mensagens : 1833
Pontos Ativos : 2832
EDU2010- Membro do Fórum
-
Inscrito dia : 09/12/2010
Mensagens : 1833
Pontos Ativos : 2832
EDU2010- Membro do Fórum
-
Inscrito dia : 09/12/2010
Mensagens : 1833
Pontos Ativos : 2832
Re: Codigo destas imagens de modo menu
Adicione este código HTML onde deseja colocar o menu:
Azul -> O link do qual irá redirecionar
Vermelho -> Imagem que irá aparecer
Feito isto, adicione este código no seu CSS:
<div class="mtvmenu">
<a href="link">
<div class="mtv" style="background-image:url(url_da_imagem);"></div></a>
<a href="link">
<div class="mtv" style="background-image:url(url_da_imagem);"></div></a>
<a href="link">
<div class="mtv" style="background-image:url(url_da_imagem);"></div></a>
<a href="link">
<div class="mtv" style="background-image:url(url_da_imagem);"></div></a>
</div>
Azul -> O link do qual irá redirecionar
Vermelho -> Imagem que irá aparecer
Feito isto, adicione este código no seu CSS:
- Código:
.mtv:hover {
border: solid 5px #5caaff;
width: 290px;
height: 390px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
opacity: 0.9;
}
.mtv {
width: 300px;
/* border-radius: 10px; */
height: 400px;
margin: 10px;
display: inline-block;
}
Última edição por Luiz~ em 23/04/17, 08:11 pm, editado 1 vez(es) (Razão : Adicionar o ícone em curso. ._.')
MateusV.- Principal contribuidor
- Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289
Re: Codigo destas imagens de modo menu
Ok , qual o tamanho da imagem que devo usar e se eu quiser colocar um Titulo abaixo da imagem ..
Testei e é isso mesmo ...
Testei e é isso mesmo ...
EDU2010- Membro do Fórum
-
Inscrito dia : 09/12/2010
Mensagens : 1833
Pontos Ativos : 2832
Re: Codigo destas imagens de modo menu
Provavelmente, uma imagem quadrada irá ajudar.
Às dimensões, igual à do fórum que o senhor citou.
o/
Às dimensões, igual à do fórum que o senhor citou.
o/

Bem-vindo ao Fórum dos Fóruns! |
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte. Antes de criar um tópico, verifique se sua questão já não foi respondida. Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum. |
Luiz — Admineiro |
Luiz- Admineiro
-
Inscrito dia : 22/04/2016
Mensagens : 6534
Pontos Ativos : 7305
Re: Codigo destas imagens de modo menu
Tem como eu colocar um titulo pra cada imagem ?
EDU2010- Membro do Fórum
-
Inscrito dia : 09/12/2010
Mensagens : 1833
Pontos Ativos : 2832
Re: Codigo destas imagens de modo menu
Basta o senhor editar a imagem, e colocar um título nela, ou alterar o código para:
o/
- Código:
<div class="mtvmenu">
<a href="link">
<h4>TÍTULO</h4>
<div class="mtv" style="background-image:url(url_da_imagem);"></div></a>
<a href="link">
<h4>TÍTULO</h4>
<div class="mtv" style="background-image:url(url_da_imagem);"></div></a>
<a href="link">
<h4>TÍTULO</h4>
<div class="mtv" style="background-image:url(url_da_imagem);"></div></a>
<a href="link">
<h4>TÍTULO</h4>
<div class="mtv" style="background-image:url(url_da_imagem);"></div></a>
</div>
o/

Bem-vindo ao Fórum dos Fóruns! |
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte. Antes de criar um tópico, verifique se sua questão já não foi respondida. Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum. |
Luiz — Admineiro |
Luiz- Admineiro
-
Inscrito dia : 22/04/2016
Mensagens : 6534
Pontos Ativos : 7305
Re: Codigo destas imagens de modo menu
Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema. Tópico marcado como Resolvido e movido para Questões resolvidas. |

Bem-vindo ao Fórum dos Fóruns! |
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte. Antes de criar um tópico, verifique se sua questão já não foi respondida. Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum. |
Luiz — Admineiro |
Luiz- Admineiro
-
Inscrito dia : 22/04/2016
Mensagens : 6534
Pontos Ativos : 7305
Fórum dos Fóruns :: Atendimento ao Usuário Forumeiros :: Questões sobre códigos :: Questões resolvidas sobre HTML & BBCode
Página 1 de 1
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum