Adicionar link na imagem do código HTML

Detalhes da questão

Endereço do fórum: https://www.criadoresdepassaros.com/
Versão do fórum: ModernBB

Descrição

Bom dia , gostaria de nesse código que estou criando , linkar na imagem de exemplo o caminho ( link ) que leva ate a mesma , segue código de exemplo e imagem


O código é este

Código:

<title>Criadores de Pássaros</title><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><style>
* {
  box-sizing: border-box;
}
 
/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}
 
/* Header/logo Title */
.header {
    padding: 1px;
    text-align: center;
    background: #1a88bc;
    color: white;
}
/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}
 
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  margin-top: -21px;
}
 
/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}
 
 
/* Right-aligned link */
.navbar a.right {
  float: right;
}
 
/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
 
/* Active/current link */
.navbar a.active {
  background-color: #666;
  color: white;
}
 
/* Column container */
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}
 
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}
 
/* Main column */
.main {
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}
 
/* Fake image, just for this example */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
    background-image: url(https://i.servimg.com/u/f39/15/98/91/46/coleir11.jpg);
    background-size: cover;
}
.text1 {
    margin-top: 146px;
    text-align: center;
    background: #000000b3;
    color: white;
    padding: 8px;
    width: auto;
}
 
.fakeimg2 {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
    background-image:url(https://i.servimg.com/u/f81/18/46/61/47/111.png);
}
.text2 {
    margin-top: 146px;
    text-align: center;
    background: #000000b3;
    color: white;
    padding: 8px;
    width: auto;
} 
 
 
  .fakeimg3 {
    background-color: #aaa;
    width: 100%;
    padding: 8px;
    background-image: url(https://i.servimg.com/u/f81/18/46/61/47/210.png);
    background-size: cover;

}
.text3 {
    margin-top: 146px;
    text-align: center;
    background: #000000b3;
    color: white;
    padding: 20px;
    width: auto;
}
 
  .fakeimg4 {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
    background-image: url(https://www.parmais.com.br/wp-content/uploads/img-investir-em-acoes-ou-fundo-de-acoes-texto.png);
    background-size: cover;
}
.text4 {
    text-align: center;
    background: #000000b3;
    color: white;
    padding: 8px;
    width: auto;
}
 
  .fakeimg5 {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
    background-image: url(https://www.parmais.com.br/wp-content/uploads/img-investir-em-acoes-ou-fundo-de-acoes-texto.png);
    background-size: cover;
}
.text5 {
    text-align: center;
    background: #000000b3;
    color: white;
    padding: 8px;
    width: auto;
}
 
  .fakeimg6 {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
    background-image: url(https://www.parmais.com.br/wp-content/uploads/img-investir-em-acoes-ou-fundo-de-acoes-texto.png);
    background-size: cover;
}
.text6 {
    text-align: center;
    background: #000000b3;
    color: white;
    padding: 8px;
    width: auto;
}
 
/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
 
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}
 
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
</style> 
<div class="header">
                                                                         <img src="" style="text-align: center;" />                                                                     
   <p>
                                                                            <strong></strong>                                                                   
   </p>
                                                                                                                                              
</div>
                                                   
<div class="navbar">
                                                                         <a href="https://www.criadoresdepassaros.com" class="active">Home</a>  <a href="https://www.criadoresdepassaros.com/forum">Fórum</a>  <a href="https://www.criadoresdepassaros.com/f13-doencas-e-medicamentos">Alimentaçao Pássaros</a>  <a href="https://www.criadoresdepassaros.com/contact" class="right">Contato</a>
</div>
                                                   
<div class="row">
                                                                                                                                              
   <div class="side">
                                                                                                                                                   
      <h2>
                                                                           <br />                                                                 
      </h2>
                                                                                                                                                   
      <div class="fakeimg" style="height:200px;">
                                                                                                                                                
         <div class="text1">
                                                                              Coleiro                                                                 
         </div>
                                                                                                                                                
      </div>
                                                                                                                                                   
      <p style="text-align: center;">
                                                                                                                                     Sucesso na Criação de Coleiro                                                             
      </p>
                                                                                                                                         
      <h3 style="text-align: center;">
                                                                           <a href="https://www.criadoresdepassaros.com/f4-coleiro-sporophila-caerulescens-tire-suas-duvidas">Dicas Coleiro - Criação e Manejo -LER MAIS </a><br />                                                                 
      </h3>
                                                                                                                                 
      <div style="text-align: center;">
                                                                       <br />                                                             
      </div>
                                                                                                                                 
      <div>
                                                                       <br />                                                             
      </div>
                                                                                                                                 
      <div>
                                                                       <br />                                                             
      </div>
                                                                                                                                 
      <center>
                                                                                                                                       <span class="Apple-tab-span" style="white-space:pre">   </span> <a href="https://www.criadoresdepassaros.com/t38869-como-ter-sucesso-na-reproducao-de-canarios-belga"><img src="https://i.imgur.com/CYHHwJ3.png" style="width:300px;height:px;" /></a>                                                             
      </center>
                                                                                                                                                                                             
      <center>
                                                                                                                                       <span class="Apple-tab-span" style="white-space:pre">   </span> <a href="https://www.criadoresdepassaros.com/t38747-saiba-tudo-sobre-a-criacao-de-coleiro"><img src="https://i.imgur.com/jbEWgo6.png" style="width:300px;height:px;" /></a>                                                             
      </center>
                                                                                                                                                                                             
      <center>
                                                                                                                                       <span class="Apple-tab-span" style="white-space:pre">   </span> <a href="https://www.criadoresdepassaros.com/t38916-calopsita-guia-completo-de-criacao-e-reproducao#291713"><img src="https://i.imgur.com/DUBYQfC.png" style="width:300px;height:px;" /></a>                                                             
      </center>
                                                                                                                                                                                           
      <center>
                                                                                                                                       <span class="Apple-tab-span" style="white-space:pre">   </span> <a href="https://www.criadoresdepassaros.com/t38825-saiba-tudo-sobre-a-criacao-de-trinca-ferro-verdadeiro"><img src="https://i.imgur.com/T2zqSZ8.png" style="width:300px;height:px;" /></a>                                                                   
         <div>
                                                                              <br />                                                                 
         </div>
                                                                                                                                          
         <div>
                                                                              <br />                                                                 
         </div>
                                                                                                                                          
      </center>
                                                                                                                                 
   </div>
                                                                                                                                    
   <div class="main">
                                                                                                                                       
      <h5>
                                                                           <span style="font-size: 16px;"> Fórum de discussão referente a criação de  Pássaros </span>                                                                 
      </h5>
                                                                                                                                       
      <h2>
                                                                           <span style="font-size: 18px;"><span style=""> Todas especies de Pássaros Silvestres    </span>                                                                </span> 
      </h2>
                                                                                                                                                   
      <div class="fakeimg2" style="height:200px;">
                                                                                                                                                
         <div class="text2">
                  Criação de aves Silvestres todas Espécies       
         </div>
                                                                                                                                                
      </div>
                                                                                                                                                   
      <p>
                                                                             Olá amigos Criadores de todo Brasil                                                                   
      </p>
                                                                                                                                                   
      <p>
                                                                             Criação de Pássaros Silvestres  , reprodução, manejo, dicas , tudo que você precisa saber para criar , manejar e reproduzir Pássaros  <strong>SILVESTRES</strong>  , <a href="https://www.criadoresdepassaros.com/">Cadastre-se grátis</a> , fique por dentro de todas nossas novidades , acesse sobre <a href="https://www.criadoresdepassaros.com/c2-criacao-de-passaros-silvestres"><strong>CRIAÇÃO DE PÁSSAROS SILVESTRES</strong>  - Manejo completo -  <strong>LER MAIS</strong>  </a>                                                               
      </p>
                                                                              <br />                                                                       
      <h2>
           <span style="font-size: 18px;">                                                                  Criação de Pássaros Exóticos                                                                  </span> 
      </h2>
                                                                                                                                                   
      <h5>
                                                                                                                                                
      </h5>
                                                                                                                                                   
      <div class="fakeimg3" style="height:200px;">
                                                                                                                                                
         <div class="text3">
                                                                                Criação de Pássaros Silvestres e Exóticos                                                                 
         </div>
                                                                                                                                                
      </div>
                                                                                                                                                   
      <p>
           <br /> 
      </p>
       
      <p>
           <br /> 
      </p>
       
      <p>
                                                                           Criar é preservar a natureza e suas especies com com consciência.                                                                 
      </p>
                                                                                                                                         
      <p>
                                                                           Criação de Pássaros Exóticos  , reprodução, manejo, dicas , tudo que você precisa saber para criar , manejar e reproduzir Pássaros  <strong>exóticos</strong>  , <a href="https://www.criadoresdepassaros.com/">Cadastre-se grátis</a> , fique por dentro de todas nossas novidades , acesse sobre <a href="https://www.criadoresdepassaros.com/c7-criacao-de-passaros-exoticos"><strong>CRIAÇÃO DE PÁSSAROS EXÓTICOS</strong>  - Manejo completo -  <strong>LER MAIS</strong>  </a>                                                                                                                 
      </p>
                                                                                                                   
      <p>
                                                                 <a href="https://www.criadoresdepassaros.com/t21631-artigo-reproducao-de-aves-eduardo-machado#178429"></a><br />                                                                 
      </p>
                                                                                                                                                 
   </div>
</div>
                                                                             
<center>
                                                                                                                   <script data-cfasync="false" src="https://api.cazamba.com/common/czmb.min.js" type="text/javascript"></script><script type="text/javascript">var _czmb = _czmb || [];_czmb.push({token: "19a6baa3d163ba71f7eac94cb18447b4"});</script>
</center>
  <script data-ad-client="ca-pub-6750849678976461" async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script data-ad-client="ca-pub-6750849678976461" async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <a target="_blank" href="https://www.forumeiros.com">forumeiros.com</a>

E as imagens são essas da foto abaixo :




links para redirecionar as imagem

imagem 1 link

https://www.criadoresdepassaros.com/c2-criacao-de-passaros-silvestres

Imagem 2 link

https://www.criadoresdepassaros.com/c7-criacao-de-passaros-exoticos

Boa tarde, Edu.

Você tentou inserir o link <a href="#">imagem</a>? Se não, poderia tentar por favor? Exemplo da imagem a seguir:
Basicamente, se inserir o atributo de ligação antes da <div> que contém a imagem, já resultaria no que deseja. Por gentileza, queira tentar e nos diga se resulta.

@EDU2010: Basta investir a hiperligação (como dito pelo Shek) na tag HTML pretendida seja imagem ou um outro elemento.

Tópico resolvido Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.