Repositório Códigos HTML

10. Imagens em quadros

img1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

img2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

img3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Read More

Veja a seguir o código HTML comentado.

Código

<div class="row-fluid">
<div class="image-box span4"><img src="#" alt="img1" class="img-responsive" width="600" height="300" />
<div class="image-box-content">
<p>TEXTO.</p>
<p style="text-align: center;"><a class="btn btn-default" href="#">Read More</a></p>
</div>
</div>
<div class="image-box span4"><img src="#" alt="img2" class="img-responsive" width="600" height="300" />
<div class="image-box-content">
<p>TEXTO</p>
<p style="text-align: center;"><a class="btn btn-default" href="#">Read More</a></p>
</div>
</div>
<div class="image-box span4"><img src="#" alt="img3" class="img-responsive" width="600" height="300" />
<div class="image-box-content">
<p>TEXTO.</p>
<p style="text-align: center;"><a class="btn btn-default" href="#">Read More</a></p>
</div>
</div>
</div>

Comentário

O trecho em rosa refere-se às imagens. 

O trecho em salmão é texto explicativo a ser inserido abaixo da imagem.

O trecho em azul é o link para onde o "Read more!" irá levar. Se quiser que o link vá para um arquivo em específico, suba o arquivo em uma pasta do ambiente, clique com o botão direito sobre o arquivo e copie o endereço do link. Você também pode colocar o link para uma outra página.