Наскоро работи на място на клиента и той ме помоли да предизвика такъв ефект. Този ефект често се използва на мястото на портфейл, когато на сайта трябва да покаже най-визуални и информационни компоненти. Има много различни методи. Аз никога не бих направил такова нещо е направил. Започнах да търся и намерих няколко различни метода.
Първият метод включва използването на JQuery плъгин. Не съвсем ефекта, което търсех. В допълнение, изпълнението на приставката много на тегло.
Друг начин е - да се сложи на IMG таг в контейнера и да манипулира изображението чрез CSS. Тук има своите предимства: можете да определите източника използване srcset атрибут, който се зарежда съответния образ за конкретно устройство.
В моя случай, аз исках да се контролира ефектът от мащаба докрай чрез CSS, така че аз избрах втория начин.
основен
За оптимална производителност, реших да използвам превърне имота за да увеличите изображението. Така получаваме CSS анимации с хардуерно ускорение, което го прави по-гладка.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Вместо това взех IMG таг DIV тагове и я поставете в контейнер. Това устройство е трябвало да симулира IMG таг. структура:
На първо място, трябва да определите размера на майка елемент. елементи за деца може да запълни родителското устройство използване свойства ширина: 100%, и височина: 100%. Необходимо е също така да зададете фоново изображение, което ще се затвори 100% блок.
След това добавете навъртам ефект на родителското устройство. Този ефект ще се отрази на подчинен елемент. Фокусът Псевдо е добро за достъпност:
За най-голяма подкрепа в браузъри, можете да използвате специален инструмент за добавяне на продавача версия префикс. Заключителни нашия базов ефект, можете да добавите малко плавен преход към нормалното състояние на детето елемент:
За добавяне препокриваща слой с определен цвят може да се използва тип псевдо. преди:
Ако сега се движите мишката на родителското устройство, на върха на дете елемент от цветен слой трябва да се появи! И накрая, ние ще разгледаме как да добавите текст към намиращото се над слой. В нашето дъщерно звено може да се добави нов елемент:
Span етикет, можете да настроите няколко стилове:
Текстът се появява само, когато задържите курсора на блок .parent на:
Подкрепа за мобилни устройства
Ако контейнерите са направени под формата на линкове, както и мишката състояние не носи полезна информация, можете да оставите всичко просто ей така.
Редакционен: Дилън Уин-Браун
Редакция: Екип webformyself.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Най-IT новини и уеб разработки на нашия канал Телеграма
HTML5 и CSS3 практика от нула до резултата!
Свързани статии