Така че, ние ще имаме шест различни примери на подписи върху изображенията. HTML-част от нашия проект изглежда по следния начин (разшири, за да видите):

Всички стилове пазим в отделен документ style.css. не зарежда HTML страници. Не забравяйте да включите връзка към него в маркера :

Да се ​​създаде CSS стил:

Добавете няколко общи характеристики за нашия бокс-ите, и плава: наляво, за да се приведе в съответствие с левия ръб на елемента, за да си почине кутии следват един след друг. Да не забравяме и за преливане имота скрит стойност - благодарение на всичко, което е извън кутията ще бъде скрит.

Също така задайте преход имота за всички изображения:

Една част

Сега идва подписите: някои общи характеристики и, разбира се, преходен имот също е за тях да се прилага. Вместо да използвате параметъра непрозрачност. имаме по-добро връщане на цветен модел RGBA, където канал алфа е отговорен за прозрачността на цвета, ние определяме стойността на 0.7. да се направи на заден план за подписването леко прозрачна, без това да повлияе на текста:

Първият ни пример за това е може би един от най-лесните - надпис се появява отдолу нагоре, когато курсора на мишката. За нея, ние ще определи фиксиран височина 40px и по-ниска позиция на елемента в -40px. че тя е била скрита под образа, когато курсорът не е свършила:

Във второто изпълнение, подписът съвпада с ширината и височината на изображението - 200 × 200 PX и "листата" отгоре надолу:

В този пример, ние считаме ефекта гладка разпад. За да се установи на първоначалното състояние на непрозрачност прозрачност нулева стойност:

Четвъртото заглавие е "пътуване" от едната страна към другата:

Тук се прилага ефект на въртене, докато завъртане няма да бъде подписан само, но на снимката себе си. За да направите това трябва да добавим трансформиращите собственост. задаване на стойност въртене в -180deg:

В последния случай, ние използваме т.нар мащабиране ефект. И ако в предишната версия на текста се появява едновременно с фона, но сега ще се появи със закъснение и части - първата позиция h3. и следния текст P:

Втора част: възраждане

В този раздел на урока, ние определяме поведението на всеки елемент, когато курсорът на екрана.

поведение 1

За първи пример подпис "пътува" от дъното, когато задържите, използвайте трансформира имот и да кажа елемент се движат по оста У:

поведение 2

Второто заглавие трябва да "остави" от горе на долу, за които ние използваме положителна стойност за translateY функции:

поведение 3

Да ви кажа честно, този пример е най-лесно, когато курсорът е върху изображението, непрозрачността е 1 което прави визуална:

4 поведение

Както бе споменато по-горе, четвърто заглавието ще се плъзне от една страна на друга. Ето защо, ние трябва да се движат не само на текста, но също така и снимки.

Когато мишката върху елемента ще се движат толкова дълго, колкото изглежда не на 100%. Имайте предвид, че за да превъртате хоризонтално, ние използваме translateX:

поведение 5

Когато курсорът е, на DIV контейнер с картината и титлата ще се превърта обратно на часовниковата стрелка - -180deg. скриване и разкриване на надписа на изображението:

поведение 6

Този пример съдържа множество ефекти веднага. Когато курсорът се намира в картината, тя увеличава - е отговорен за тази стойност мащаб (1.3):

Можете да изтеглите архив на файлове, за да работи с този код себе си. Надяваме се, че този урок ще дойде по-удобно. В момента има забавни експерименти и успех!