CSS Magic # 1. Beautiful hover effect

CSS Magic # 1.  Beautiful hover effect

Html

<div class="main__menu">
<div class="container">
<nav>
<ul>
<li><a href="#"><span data-text="HTML/CSS"></span>HTML</a></li>
<li><a href="#"><span data-text="JavaScript"></span>JavaScript</a></li>
<li><a href="#"><span data-text="CSS"></span>CSS</a></li>
<li><a href="#"><span data-text="React"></span>React</a></li>
<li><a href="#"><span data-text="Angular"></span>Angular</a></li>
</ul>
</nav>
</div>
</div>

Simple html code, actually. The only thing that matters is that the span inside the link has a data-text attribute. It must match the text inside the link itself.

Note: There is a possible hover bug, which I myself once encountered on another site. Hover may not work correctly if you have words with a space in these links. In this case, the data-attribute must contain “textnbsptext”. Those. instead of a space, we put the nbsp symbol. And don’t forget the semicolon)

CSS

a {
position: relative;
display: inline-block;
overflow: hidden;
font-size: vh(80);
color: $color-white;
opacity: 0;
transform: translateY(-10px);
transition: all 0.6s;

span
{
position: absolute;
left: 0;
display: block;
overflow: hidden;
width: 0;
height: 100%;
font-size: vh(80);
background-color: #111517;
backface-visibility: hidden;
transition: width .3s;

&::before
{
content: attr(data-text);
position: absolute;
right: 0;
display: block;
width: 100%;
color: $color-red;
backface-visibility: hidden;
}
}

&:hover {
span {
width: 100%;
transition: width 0.3s;
}
}
}

I’ll probably omit the rest of the styles here, I’ll show only the most necessary ones. You will see the rest at the end of the article in the codepen. What is really important here is overflow: hidden link and pseudo-element work span… Please note that we indicate as content content: attr(data-text), this is just the same “call” of data directly from the data-attribute. Well, everything works according to a fairly simple logic – the span width changes from zero to 100% smoothly, thanks to transition… That’s all) And the codepen itself:

I hope this technique was useful to you, and you will be able to use it somewhere on your projects. This was the first release of CSS Magic, it will only get more interesting from now on)

Leave a Reply

Your email address will not be published. Required fields are marked *