Создание анимированной фотостены на CSS

Сегодня мы создадим еще одно удивительное и забавное CSS демо. На этот раз мы создадим большую стену из фотографий, без швов. При наведении мыши на изображение, появится прозрачное, черное наложение, а изображение будет масштабироваться в зависимости от настроек.

Сложность

css фотостена

HTML

Для начала, создадим общую структуру нашей страницы. Все, что нам нужно, это один контейнер и неупорядоченный список.

<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Теперь разместим некоторые элементы в списке. Начнем с параграфов, т.к. при наведении у нас должен появляться текст. затем, добавляем изображения.

<div class="container">
<ul>
<li><p></p><img src="/"></li>
<li><p></p><img src="/"></li>
<li><p></p><img src="/"></li>
</ul>
</div>

Теперь у нас есть структура, оставим некоторые атрибуты пустыми (вы можете использовать любые фотографии, только убедитесь, что их размер: 320 × 213).

<div class="container">
<ul>
<li><p>big</p><img src="http://lorempixum.com/320/213/transport/1"></li>
<li><p>small</p><img src="http://lorempixum.com/320/213/transport/2"></li>
<li><p>fast</p><img src="http://lorempixum.com/320/213/transport/3"></li>
<li><p>slow</p><img src="http://lorempixum.com/320/213/transport/4"></li>
<li><p>awesome</p><img src="http://lorempixum.com/320/213/transport/5"></li>
<li><p>convenient</p><img src="http://lorempixum.com/320/213/transport/6"></li>
<li><p>necessary</p><img src="http://lorempixum.com/320/213/transport/7"></li>
<li><p>fun</p><img src="http://lorempixum.com/320/213/transport/8"></li>
<li><p>boring</p><img src="http://lorempixum.com/320/213/transport/9"></li>
<li><p>crazy</p><img src="http://lorempixum.com/320/213/transport/10"></li>
<li><p>boring</p><img src="http://lorempixum.com/320/213/transport/1"></li>
<li><p>small</p><img src="http://lorempixum.com/320/213/transport/2"></li>
<li><p>fast</p><img src="http://lorempixum.com/320/213/transport/3"></li>
<li><p>slow</p><img src="http://lorempixum.com/320/213/transport/4"></li>
<li><p>awesome</p><img src="http://lorempixum.com/320/213/transport/5"></li>
<li><p>convenient</p><img src="http://lorempixum.com/320/213/transport/6"></li>
<li><p>necessary</p><img src="http://lorempixum.com/320/213/transport/7"></li>
<li><p>fun</p><img src="http://lorempixum.com/320/213/transport/8"></li>
<li><p>boring</p><img src="http://lorempixum.com/320/213/transport/9"></li>
<li><p>crazy</p><img src="http://lorempixum.com/320/213/transport/10"></li>
</ul>
</div>

Мы используем много изображений, но это необходимо для получения красивого эффекта.

Стиль блоков

Первым шагом является настройка стиля для основного контейнера.

/*------Контейнер------*/
.container {
  width: 1120px;
  margin: 0 auto 50px auto;
}

Медиа-запросы

Для того что бы столбцы с изображениями смотрелись одинаково на разных экранах, необходимо зададим ширину блока с разными интервалами, в зависимости от разрешения, в результате получим адаптивный макет.

@media screen and (max-width: 1120px) {
  .container {width: 840px;}
}
 
@media screen and (max-width: 840px) {
  .container {width: 560px;}
}
 
@media screen and (max-width: 560px) {
  .container {width: 280px;}
}

Стиль списка изображений

Далее настроим основные стили списков. У нас есть три области: маркированный список, элементы списка и список который используется при наведении курсора.

Настроим некоторые детали селектора ul, чтобы у нас не было видно пунктов маркированного списка или странных проблем с расположением отступов. Элементы li должны быть расположены относительно, это даст нам начальную точку для абсолютного расположения текста, который мы будем использовать позже. Элементы списка также требуют настройки высоты и ширины, зададим их позже.

/*------Список------*/
.container ul {
  list-style-type: none;
}
 
.container li {
  float: left;
  position: relative;
  width: 280px;
  height: 187px;
  overflow: hidden;
}
 
.container li:hover {
  cursor: pointer;
}

Стиль параграфов

Прежде чем мы перейдем к стилю изображений, давайте приведем наш текст в порядок.

/*------Текст------*/
.container li p {
  color: transparent;
  background: transparent;
  font: 200 30px/187px 'Arvo', Helvetica, Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
 
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 187px; 
 
 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
 
.container li:hover p {
  color: white;
  background: #000; /*fallback for old browsers*/
  background: rgba(0,0,0,0.7);
}

Внешний вид параграфов

Первый раздел используется для элементов списка. Для удобства, я разделил эту часть на три блока. Первый блок управляет общим видом текста. Я  использовал шрифт Arvo, установил по центру и сделал его в верхнем регистре.

Позиция параграфов

Следующий фрагмент кода устанавливает абсолютную позицию для нашего текста. Если мы не сделаем этого, то текст будет проходить рядом или над нашими изображениями.

Также установил высоту и ширину абзаца. Благодаря этому, будет появляться черное наложение на верхней части изображения при наведении курсора мыши.

Переход

Третий блок кода – устанавливает CSS transition.

Стиль изображений

Для создания эффекта масштабирования, когда пользователь наводит мышью на изображение, то оно начнет изменяться в размерах и появится темное наложение с текстом. Хитрость заключается в том, что бы этот эффект был на всех изображениях, поэтому мы поставим определенную высоту и ширину в нашем списке элементов с ovwerflow: hidden. Теперь мы можем увеличить размер изображения, и оно останется в пределах первоначального размера, таким образом, мы имитируем зум. Ловкий трюк!

Для этого установите размер изображений в 280 × 176 и добавьте переход. Затем, когда пользователь наводит курсор, вернуть изображение стандартных размеров: 320 × 213.

/*------Изображения------*/
.container img {
  width: 280px;
  height: 187px;
 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
 
.container li:hover img {
  width: 320px;
  height: 213px;
}

Перевод статьи Build an Animated Photo Wall With CSS

Тэги: gallery

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.