Създаване на галерия и увеличаване на изображението, когато щракнете

Създаване на обикновен галерия - твърде лесно. Нека да го направи по-"жив" и интересен, като се използват свойствата на CSS3! В допълнение, не се прилагат за него всеки друг JS и JQeury.

В този пример, аз ще ви покажа как да се направи една пъстра и оригинален галерия използвайки само HTML и CSS3 свойства.

Главната особеност в галерията от образи се увеличава, като кликнете върху тях.
В действителност тя е много проста, трябва да ползвате само един атрибут на HTML и CSS псевдо един.

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

Първата стъпка е да издаде самата маркер . Можете незабавно да добавите прозрачност, плавни сенки, както и тирета:

Сега е необходимо да се премахне ефекта на прозрачност, когато задържите, а не когато кликнете:

Остава само да се направи, за да увеличите изображението, когато се натисне. За това ние използваме псевдо. Но това, което. висене. активен. връзка тук явно не е удобно. За този случай е подходящ псевдо: фокус. тъй като тя работи само когато щракнете върху обекта и изчезва, когато има и друг кликване.

Почти готова. Но сега, когато кликнете върху снимката до него се образува жълта линия, като например Google Chrome. Това е лесно да се коригира чрез добавяне на свойствата на инсулт с нулева стойност: