15 hover эффектов для сайта

15 различных hover эффектов для сайта с css анимацией текста

Привет)) Опять пропал на месяц! Был в Крыму, а там с интернетом проблемы, да и просто некогда было. И вот добрался до цивилизации, душа и хорошего интернета и решил запостить интересные фишки для сайта. А именно - 15 вариантов hover эффектов для сайта. Под hover эффектом я подразумеваю анимацию при наведении.

Здесь изменяется цвет текста, его размер, место положения, появляются дополнительные блоки, затемняется или увеличивается фоновое изображение, появляется дополнительный текст и так далее. Каждый эффект выглядит круто.

Пригодится могут эти эффекты где угодно, на любом сайте. Допустим, Вам нужно сделать блоговую или новостную ленту, где у вас будут новости в формате: изображение, заголовок, превью. С любым из этих эффектов новостная лента будет выглядеть стильно (смотря как расположить конечно :) ). Также и на любом другом сайте, например, в разделе услуг у вас 6 превъюшек услуг. Эти эффекты при наведении сделают большое дело в оформлении.

Очень большой плюс в том, что вся структура верстки этих hover эффектов имеет адаптивную верстку. Вы это можете проверить, уменьшив ширину вашего браузера.

Подключаются все эти эффекты одними css файлами. И чтобы эффекты заработали нужно:

Для включения адаптивной верстки в <head> нужно вставить:

        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1">

Следом подключить css файлы

        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />

В самый низ сайта нужно вставить следующий javascript:

        <script>
            // For Demo purposes only
            [].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
                el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
            } );
        </script>

Ну а туда, где вы хотите видеть любой из hover эффектов вставляете html код (я вставил первый эффект):

<div class="container">
            <div class="grid">
                <figure class="effect-lily">
                    <img src="img/1.jpg" alt="img01"/>
                    <figcaption>
                        <h2>Nice <span>Lily</span></h2>
                        <p>Lily likes to play with crayons and pencils</p>
                        <a href="#">View more</a>
                    </figcaption>            
                </figure>
            </div>
</div><!-- /container →

Вот и все, css эффекты подключены, теперь вы можете менять эффекты и смотреть какой подойдет лучше. На этом у меня все. Пока

Похожие статьи