» » 15 різноманітних hover ефектів для сайта з css анімацією тексту

15 різноманітних hover ефектів для сайта з css анімацією тексту

15 різноманітних hover ефектів для сайта з css анімацією тексту

Тут змінюється колір тексту, його розмір, місце положення, з'являються додаткові блоки, затемнюється або збільшується фонове зображення, з'являється додатковий текст і так далі. Кожен ефект виглядає круто.

Пригадується можуть ці ефекти де завгодно, на будь-якому сайті. Припустимо, Вам потрібно зробити блогових або новинну стрічку, де у вас будуть новини у форматі: зображення, заголовок, превью. З будь-яким з цих ефектів новинна стрічка буде виглядати стильно (дивлячись як розташувати звичайно :)). Також і на будь-якому іншому сайті, наприклад, у розділі послуг у вас 6 прев'юшек послуг. Ці ефекти при наведенні зроблять велику справу в оформленні.

Дуже великий плюс в тому, що вся структура верстки цих hover ефектів має адаптивну верстку. Ви це можете перевірити, зменшивши ширину вашого браузера.

Підключаються всі ці ефекти одними css файлами. І щоб ефекти заробили потрібно:

Для включення адаптивної верстки в потрібно вставити:
<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 &#8594;


От і все, css ефекти підключені, тепер ви можете міняти ефекти і дивитися який підійде краще. На цьому у мене все.

Завантажити безкоштовно


scripts
599 19.08.15



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру