Эффект при наведении на блок, ссылку, элемент сайта
Доброго времени суток. 🙂
В этой статье хочу показать вам, как сделать один интересный эффект при наведении. Сразу хочу уточнить, что данная статья рассчитана на тех, кто хорошо знаком с CSS. Если вы занимаетесь сайтостроением, версткой и тд, то вам может пригодится данная идея. При желании сможете изменить данный пример под себя и использовать при верстке своих проектов. Пример того что получится, можно посмотреть по ссылке ниже:
Делается все очень просто. Для начала давайте рассмотрим HTML разметку.
<div class="block_services"> <a target="_blank" href="https://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, задав ему класс или айди. Стилей на первый взгляд много, но если вы разберетесь, то поймете, что все очень просто.
Если немного проявить фантазию, то можно эффект прокачать под себя и видоизменить его полностью. В общем, я дал вам заготовку, а дальше уже каждый может сделать, что захочет.
На этом все, спасибо за внимание. 🙂