0

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

галерия от изображения
Здравейте, скъпи приятели, читатели и посетители на блога. Как да се създаде обикновена галерия от изображения с 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 режим. Ето така компактно и красиво можете да подредите един малък вернисаж на своя собствен блог. Зарадвайте посетителите на своя блог с красиво подредените си изображения.

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

Благодаря ви и на добър час.


Няма коментари :

Публикуване на коментар


Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита