Exibição de imagens
Arredondado:
Círculo:
delimitada:
Texto:
imagem arredondada
A classe w3-round adiciona cantos arredondados a uma imagem:
imagem circulou
A classe w3-círculo molda uma imagem para um círculo:
imagem limitada
A classe w3-fronteira adiciona bordas ao redor da imagem:
imagem Hoverable
A classe w3-pairar-opacidade acrescenta transparência à imagem ao passar o mouse:
Imagem como cartão
Enrole qualquer uma das classes * w3-cartão- todo o elemento <img> para exibi-lo como um cartão (adicionar sombras):
Simon
O chefe de todos os chefes
imagem do texto
Posicionar o texto em uma imagem com as classes w3-display-:
Top Left
Canto superior direito
Inferior esquerdo
Canto inferior direito
Exemplo
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-middle w3-large">Middle</div>
</div> Tente você mesmo " Construindo um álbum de fotos
Neste exemplo, usamos o sistema da Rede Responsive W3.CSS para criar um álbum de fotos que parece ser bom em todos os dispositivos. Você aprenderá mais sobre isso mais tarde.
verão 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Exemplo
<div class="w3-third">
<div class="w3-card-2">
<img src="img_monterosso.png" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
Tente você mesmo "