Visualización de imágenes
Redondeado:
Circulo:
Limita:
Texto:
imagen redondeada
La clase W3 ronda añade esquinas redondeadas a una imagen:
imagen círculo
La clase W3-círculo da forma a una imagen para hacer un círculo:
imagen confinada
La clase W3-frontera agrega bordes alrededor de la imagen:
imagen Hoverable
La clase W3-asomar-opacidad añade transparencia a la imagen en el ratón por encima:
Imagen como una tarjeta
Envolver cualquiera de las W3-tarjeta- clases * de todo el elemento <img> para que se muestre como una tarjeta (añadir sombras):
Simon
El jefe de todos los jefes
imagen del texto
Coloque el texto en una imagen con las clases de pantalla y el W3-:
Arriba a la izquierda
Parte superior derecha
abajo a la izquierda
Abajo a la derecha
Ejemplo
<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> Inténtalo tú mismo " La construcción de un álbum de fotos
En este ejemplo se utiliza el sistema de cuadrícula de respuesta W3.CSS para crear un álbum de fotos que se ve bien en todos los dispositivos. Usted aprenderá más sobre esto más adelante.
verano 2015
5 Terre
Monterosso
Vernazza
manarola
Corniglia
Riomaggiore
Ejemplo
<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>
Inténtalo tú mismo "