Hover.css

Коллекция CSS3-эффектов и анимаций, применяемых к ссылкам, кнопкам, логотипам, SVG, изображениям. Легко применить к своим собственным элементам, изменить или просто использовать для вдохновения. Доступно в CSS, SASS и LESS. 

Как настроить Hover.CSS

Шаг 1
Скачайте Hover.css

Шаг 2
Предполагая, что вы хотите использовать эффект Grow:

В css/hover.css, найдите класс Grow (каждый эффект назван с помощью комментария над ним):

.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

Шаг 3
Скопируйте этот эффект и вставьте его в свою собственную таблицу стилей.

Шаг 4
В HTML-файле, к которому вы хотите добавить эффект, добавьте класс .hvr-growвыбранного элемента.