Галерия от изображения на чист CSS

Здравейте приятели. Днес публикацията ми е за тези от вас, които обичат и харесват многото изображения в блога си. Или за тези, които поддържат фотоблог. Когато е необходимо да имате повече изображения на една статична страница или публикация и желаете те да са красиво подредени, но на малко място, тази галерия от изображения е просто перфектна.

Описание

Галерията се характеризира с това, че изображенията са разпръснати хаотично, а когато натиснете с бутона на мишката върху едно от тях, то се увеличава. В същото време, благодарение на стилът анимация, увеличената миниатюра се разполага перпендикулярно на страницата.

Код

Самият код на галерията с ефект на увеличаване на миниатюрите е много лек, без да е свързан с каквито и да е библиотеки и скриптове.
Кодът е с вложени в него изображения:

<div class="gallery">
       <a tabindex="1"><img src="http://fakty-o.ru/wp-content/uploads/2015/10/jivaya-priroda-foto.jpg"></a>
    <a tabindex="2"><img src="http://holidaygid.ru/wp-content/uploads/2013/04/Schwarzwald.jpg"></a>
    <a tabindex="3"><img src="http://turizm-puteshestvuem.ru/wp-content/uploads/2015/10/norway-nature-photo-beautiful-house.jpg"></a>
    <a tabindex="4"><img src="https://avatars.mds.yandex.net/get-pdb/34158/1e0aed07-0daf-4404-a5b8-d299bbf5c8e0/s800"></a>
    <a tabindex="5"><img src="http://mos-holidays.ru/wp-content/uploads/2017/03/vyistavka-priroda-v-polutonah-1.jpg"></a>   
    <a tabindex="6"><img src="http://forumsmile.ru/u/d/1/a/d1a98ee044b735788a89869e531354aa.jpg"></a>
    <a tabindex="7"><img src="http://www.astromeridian.ru/assets/images/sonnik/priroda.jpg"></a>
    <a tabindex="8"><img src="https://womanadvice.ru/sites/default/files/julie/priroda_avstralii_2.jpg"></a>
    <a tabindex="10"><img src="http://gif-kartinki.ru/1/krasivaja-priroda.jpg"></a>
    <a tabindex="9">

</div>

<style>

 .gallery {
    margin: 100px auto 0;
    width: 700px;
}
.gallery a {
    display: inline-block;
    height: 135px;
    position: relative;
    width: 180px;

    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.gallery a img {

    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;


    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;

}
/* Вращение  */
.gallery a:nth-child(1) img {
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.gallery a:focus img {
    cursor: default;
    height: 350%;
    left: -150px;
    top: -100px;
    position: absolute;
    width: 350%;
    z-index: 25;
    /* Правила перехода */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;

    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}</style>

Кодът е предвиден за 9 изображения, мисля, че този брой ще ви е достатъчен. Изображенията са примерни.

Настройки

➤В червен цвят в него са маркирани размерите на изображенията при увеличаване. Тук може да направите промяна.

➤Размерът на миниатюрите е маркиран в синьо. Мнението ми е, че те се показват по-добре с този размер. Ако тези значения в кода не са ви подходящи, опитайте се да ги промените.

➤В редовете

 <img src = "адрес на изображението .jpg"> 

въведете адресите на вашите изображения.

➤Проверете кода преди и след редакцията, за да разберете какво се е получило на тази страница.

➤Готовия вече код можете да инсталирате на статична страница, в публикация в режим на HTML, или в притурка. Ефектът ще се появи след публикуването.

И към още един много важен момент искам да привлека вниманието ви.

Първо напишете текста на публикацията, задайте всички  нейни настройки и отидете в режим HTML. На желаното място инсталирайте готовия код. Не се връщайте в нормален режим, а публикувайте. След публикуването на страницата или публикацията в кода на тази галерия не бива да променяте нищо повече. Инсталирате и публикувате. Това е всичко. В противен случай кодът няма да се показва коректно.

➤Кодът има атрибут tabindex. Това свойство определя реда на разделите за елементите. Той ви позволява да използвате бутона "Tab" (или "shift + tab"), за да превключвате изображенията. На когото от вас е интересно да научи повече за tabindex, то в мрежата има много информация.

➤Идеята е на Виктория Барад. Уточненията в кода са на руски език.

Желая ви успех и упоритост.

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

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: