Просмотр изображений
Округлые:
Круг:
Граничит:
Текст:
Природа
Округлые изображение
W3 круглый класс добавляет закругленные углы к изображению:
Объезжанная изображение
Класс w3-круг формирует изображение в круг:
Выложенные изображение
Класс w3 границы добавляет границы вокруг изображения:
Hoverable изображение
Класс w3-парят-непрозрачности добавляет прозрачность к изображению курсора мыши над:
Изображение в качестве карты
Заверните любой из W3-карты- * классов вокруг элемента <IMG> , чтобы отобразить его в виде карты (добавить тени):
Саймон
Босс всех боссов
Текст изображения
Поместите текст в изображении с W3-дисплей- классов:
Верхний левый
В правом верхнем углу
Нижняя левая
Внизу справа
средний
пример
<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> Попробуй сам " Построение фотоальбом
В этом примере мы используем систему Отзывчивый сетки W3.CSS создать фотоальбом, который хорошо выглядит на всех устройствах. Вы узнаете больше об этом позже.
Лето 2015
5 Terre
Монтероссо
Верназза
Manarola
Corniglia
Риомаджоре
пример
<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>
Попробуй сам "