Обикновена галерия от изображения

Здравейте, скъпи приятели, читатели и посетители на блога. Как да се създаде обикновена галерия от изображения с CSS анимация. Лятото и отпуските отдавна свършиха и може би много от вас ще искат да споделят своите уникални снимки с приятелите си. Този вариант на галерия от снимки с ефект на увеличаване е наистина подходящ за такъв случай. Да се балтаете с дълъг код и трудната му настройка не е необходимо. Просто трябва първо да се подготвят всички URL адреси на вашите изображения, които искате да покажете. Но за да видите за какво иде реч днес, аз ще ви помоля да погледнете в моя тестови блог. Копирайте следния код изцяло

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

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

  <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>

Редът, маркиран в червено, е мястото, където ще въведете URL адресите на вашите изображения. В тестовия блог са показани само 3 изображения. Така че, ако искате повече или по-малко, съответно ще трябва да добавяте или премахнете редчето:

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

Сега готовия код въведете директно в редактора на публикацията, там където искате да се вижда или на отделна страница, но в HTML режим. Ето така компактно и красиво можете да подредите един малък вернисаж на своя собствен блог. Зарадвайте посетителите на своя блог с красиво подредените си изображения.

От мен това е всичко.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и гласувате за блога на: