I recently created my own website and utilized this codepen
https://codepen.io/nikolamitic/pen/vpNoNq to incorporate an animation effect on my name. While it works well overall, I encountered an issue when trying to decrease the line-height of my elements without overlapping (notice the "j" and "p" characters). You can see the problem here:
h1{
display:inline-block;
font-family: sans-serif;
font-size: 110px;
letter-spacing: 3px;
margin:0;
line-height: 90px;
}
h1 p{margin:0;}
/*************************************************/
/************* LETTER ANIMATION HOVER ************/
/* Credits to https://codepen.io/nikolamitic/pen/vpNoNq */
.letter-anim{
position: relative;
color: #fff;
background-color: #222;
overflow: hidden;
cursor: pointer;
}
.letter-anim .letter-anim-dynamic,
.letter-anim .letter-anim-dynamic p {
display: flex;
justify-content: left;
align-items: center;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 2;
transition: all ease 0.7s;
}
.letter-anim .letter-anim-dynamic{
background-color: #fff;
color: #222;
overflow: hidden;
}
.letter-anim.active .letter-anim-dynamic,
.letter-anim:hover .letter-anim-dynamic {
transform: translateX(100%);
}
.letter-anim.active .letter-anim-dynamic p,
.letter-anim:hover .letter-anim-dynamic p {
transform: translateX(-100%);
}
.letter-anim-static{
font-size: 76px;
}<h1 class="letter-anim h1-firstname">
<span class="letter-anim-static">
レ・ジェーン<br/>
</span>
<span class="letter-anim-dynamic">
<p>Lejeune</p>
</span>
</h1>
<br/>
<h1 class="letter-anim h1-lastname">
<span class="letter-anim-static">
ジョゼーフ<br/>
</span>
<span class="letter-anim-dynamic">
<p>Joseph</p>
</span>
</h1>Thank you for your assistance!