Главная
Web-дизайн
Эффект при наведении на блок, ссылку, элемент сайта

Эффект при наведении на блок, ссылку, элемент сайта

Эффект при наведении на блок, ссылку, элемент сайта

Эффект при наведении на блок, ссылку, элемент сайта
Доброго времени суток. 🙂

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



Пример

Делается все очень просто. Для начала давайте рассмотрим HTML разметку.

<div class="block_services">
<a target="_blank" href="http://gnatkovsky.com.ua/">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea?</span>
</a>   
</div>

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

Дальше просто задаются эти самые стили CSS.

.block_services a:before,.block_services a:after,.block_services a:hover span{
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
 -o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.block_services a{
position:relative;
overflow:hidden;
padding:15px;
display:inline-block;
color:#212121;
text-decoration:none;
width:300px;
background:#f2f2f2;
}
.block_services a:hover span{
position: relative;
z-index: 1;
}
.block_services a:hover span{
color:#fff
}
.block_services a:before,.block_services a:after{
content:'';
position:absolute;
width:300%;
height:100%;
-moz-transform: skew(-30deg, 0deg);
-o-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
-ms-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
z-index:0;
}
.block_services a:before{
top:0;
left:200%;
background:#ad131f;
}
.block_services a:after{
top:0;
right:200%;
background:#b81625;
}
.block_services a:hover:after{
right:49%;
}
.block_services a:hover:before{
left:50%;
}

Расписывать каждую строку не буду, как и упоминал выше, статья рассчитана на людей знакомых с версткой. Скажу лишь, что весь фокус заключается в применении псевдоэлементов - after и before. Именно они и являются красными элементами, что меняют фон блока.

Стилями мы задаем плавную анимацию, внешний вид для ссылки и span элемента внутри. Вы можете вместо ссылки использовать обычный div, задав ему класс или айди. Стилей на первый взгляд много, но если вы разберетесь, то поймете, что все очень просто.

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

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 3, в среднем: 5 из 5

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко