Автор

28 12.2014
Подборка креативных ховер-эффектов для сайта

Подборка креативных ховер-эффектов для сайта


Все чаще пользователи просят нас навести примеры реализации ховер-эффектов. Эти эффекты позволяют не только скрыть, но и оживить необходимые элементы. В сегодняшнем уроке мы предоставим вашему вниманию замечательный набор прикольных ховер-эффектов, в работе которых используются современные CSS техники и 3D эффекты. Такие эффекты станут отличным дополнением для изображений или мультимедийных контентов на ресурсе. Данные ховеры должны Вас вдохновить на собственные, креативные решения для ваших сайтов.

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 1. HTML

Разметка одного из элементов будет выглядеть следующим образом:

<div class="grid">
    <figure class="effect-lily">
        <img src="img/1.jpg" alt="img01"/>
        <figcaption>
            <h2>Nice <span>Заголовок</span></h2>
            <p>Описание изображения</p>
            <a href="#">Читать далее</a>
        </figcaption>
    </figure>
    <!-- ... -->
</div>

После общих стилей для всех примеров, перечислены индивидуальные стили для каждого из примеров.

 

Шаг 2. CSS

Вот к примеру эффект под названием “Sadie”, где мы используем псевдо-элемент с линейной градиентной заливкой. Цвет заголовка будет меняться:

figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    content: '';
    opacity: 0;
    transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    color: #484c61;
    transition: transform 0.35s, color 0.35s;
    transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
    color: #fff;
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
    opacity: 1;
    transform: translate3d(0,0,0);
}

Примеры приведены для получения вдохновения. Надеемся, что данный материал будет вам полезен!

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

29 09.2014
Подборка креативных ховер-эффектов для сайта

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


12 09.2013
Подборка креативных ховер-эффектов для сайта

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


18 05.2013
Подборка креативных ховер-эффектов для сайта

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


31 07.2017
Подборка креативных ховер-эффектов для сайта

Используйте данный урок для биографии выбранного сотрудника, без необходимости выделенных страниц или модальных окон.Пусть пользователь встретит вашу команду и доверяет вашей компании!


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close