Codigo destas imagens de modo menu

Item: Codigo destas imagens de modo menu
Rating: 1

por EDU2010 em 19/04/17, 08:15 pm

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 ,

por EDU2010 em 21/04/17, 08:56 am

por EDU2010 em 22/04/17, 10:48 am

por MateusV. em 23/04/17, 07:32 pm

Adicione este código HTML onde deseja colocar o menu:

<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; }

por EDU2010 em 25/04/17, 02:42 pm

Ok , qual o tamanho da imagem que devo usar e se eu quiser colocar um Titulo abaixo da imagem ..
Testei e é isso mesmo ...

por **Luiz** em 25/04/17, 03:43 pm

Provavelmente, uma imagem quadrada irá ajudar.
Às dimensões, igual à do fórum que o senhor citou.

o/

por EDU2010 em 25/04/17, 09:03 pm

Tem como eu colocar um titulo pra cada imagem ?

por **Luiz** em 25/04/17, 09:10 pm

Basta o senhor editar a imagem, e colocar um título nela, ou alterar o código para:

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/

por **Luiz** em 30/04/17, 11:17 am

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.

Codigo destas imagens de modo menu