Простая галерея изображений CSS.

Здравствуйте, дорогие друзья, читатели и гости блога. Как создать простую галерею с помощью CSS анимации. Лето и пора отпусков заканчивается, возможно, многие из вас захотят поделиться своими неповторимыми фотографиями с друзьями. Такой вариант галереи с эффектом увеличения картинки и красивым эффектом
как раз и подойдёт для такого случая.

Возиться долго с установкой кода вам не придётся. Всего лишь нужно сначала приготовить все адреса ваших изображений, которые вы хотите показать в ней. Ещё один пример галереи можно посмотреть здесь. А вот, чтобы посмотреть ту, о которой сегодня идёт речь, попрошу перейти вас на тестовый блог.

Копируйте целиком следующий код .

<div id="gallery">
  <img alt=" название" src=" адрес изображения 1" />
  <img alt=" название" src=" адрес изображения 2 " />
  <img alt="название" src="3.jpg" />
  <img alt="название" src="4.jpg" />
  <img alt="название" src="5.jpg" />
  <img alt="название" src="6.jpg" />
  <img alt="название" src="7.jpg" />
  <img alt="название" src="8.jpg" />
</div>
<style>
#gallery {
  text-align: center;
  width: 610px;
  margin: 70px auto;
}

#gallery img {
  width: 300px;
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  opacity: 0.6;
  z-index: 1;
  margin: 0;
  position: relative;
}

#gallery img:hover {
  -webkit-transform: scale( 1.5 );
  -moz-transform: scale( 1.5 );
  -o-transform: scale( 1.5 );
  box-shadow: 0px 0px 25px gray;
  -webkit-box-shadow: 0px 0px 25px gray;
  -moz-box-shadow: 0px 0px 25px gray;
  opacity: 1;
  z-index: 10;
}</style>

В строчки, отмеченные розовым, вставляйте адреса своих фотографий. На тестовом блоге я показала только 4 картинки. Так что, если хотите больше или меньше, соответственно, добавляйте или уберите строку-

<img alt=" название" src=" адрес изображения 1" />

Теперь готовый код вставляйте прямо в редакторе сообщения или на отдельную страницу в режиме HTML в нужном месте. 

Вот так компактно и красиво можно оформить небольшой вернисаж на вашем собственном блоге. Порадуйте своих посетителей красивыми фотографиями.

А у меня сегодня всё. Спасибо, что заглядываете. Удачи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email