5 ефекта за псевдокласовия ховър

Показаните в този материал ефекти действат в съвременните браузъри. Поддръжката на IE зависи от версията и трябва да бъде добре тествана, преди да се използва в реален проект.

Връзки към демонстрации са под снимките.

ефекта

Дръпнете се

ефекта

Този ефект работи чудесно, когато имате множество хоризонтално подравнени елементи. Плъзгането на курсора на мишката по такава линийка създава вълна.

Много е лесно да се направи. За всеки елемент се дефинира поле и когато задържите курсора на мишката, размерът на полето намалява. Първоначалният марж е 15px и е намален до 2px, което кара изображението да „отскача нагоре“. Този ефект може да се използва и за текст в списък.

Преходното свойство се използва тук като добавка, тъй като ефектът изглежда страхотно без него. Той дава плавен ефект.

Мащабиране

псевдокласовия

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

За този ефект се използва набор от изображения с размер 400x133 px. След това те се намаляват по размер в CSS кода до 300x100 px и се разширяват при задържане. Използва се центриране хоризонтално и изображението с новия размер може да развали всичко, така че се прилага отрицателна стойност на полето, равна на половината от ширината.

Мигащ текст

курсора мишката