CSS Галерея изображений
CSS можно использовать для создания галереи изображений.
Добавьте описание изображения здесь
Добавьте описание изображения здесь
Добавьте описание изображения здесь
Добавьте описание изображения здесь
Галерея изображений
Следующая галерея изображений создается с помощью CSS:
Пример
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="fjords.jpg">
<img src="5terre.jpg" alt="Пять земли" width="300" height="200">
</a>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
<div class="gallery">
<a target="_blank" href="forest.jpg">
<img src="forest.jpg" alt="Лес" width="300" height="200">
</a>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
<div class="gallery">
<a target="_blank" href="lights.jpg">
<img src="lights.jpg" alt="Северное сияние" width="300" height="200">
</a>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
<div class="gallery">
<a target="_blank" href="mountains.jpg">
<img src="mountains.jpg" alt="Горы" width="300" height="200">
</a>
<div class="desc">Добавьте описание изображения здесь</div>
</div>
</body>
</html>
Попробуйте сами »
Еще примеры
Отзывчивая галерея изображений
Как использовать медиа запросы CSS для создания отзывчивой галереи изображений, которая будет хорошо смотряться на настольных компьютерах, планшетах и смартфонах.
