Hover to reveal truncated text in sliding fashion

user_9817996 0
Viewed 126

I am trying to reveal some truncated text on hover. The text will all be dynamic so each li will be different lengths of text.

The ideal situation would be to hover the truncated text, it slides to reveal the full length of the text and ends at the end.

I have created something that is close to what I need, except I cant figure out how to remove all the extra space at the end of the shorter text on the right when hovered, and how to get it to show all the text on the longer ones (they seem to get cut off)

I have created a Codepen here

Here is the HTML:

<ul>
  <li>
    <a class="link" href="#">Example of really long blog title goes here</a>
  </li>
   <li>
    <a class="link" href="#">Example of really long blog title goes here - this is a longer text</a>
  </li>
   <li>
    <a class="link" href="#">Example of really long blog title goes here - this is an even longer length to test</a>
  </li>
</ul>

And the CSS

ul {
  width:200px;
  overflow:hidden;
  background:#f2f2f2;
}
.link {
  display:block;
  white-space: nowrap;
  width:auto;
    transform: translateX(0%);
    transition: 4s ease-in-out;
}
.link:hover {
  color:red;
   transform: translateX(-100%);
}

Any help as to what I'm missing will be so appreciated!

hover css html
2 Answers

The given code gets close to what is required but we need the texts to translate by an amount that is equal to their widths less the width of the 'window' through which they are seen so that they end with their last character to the right of this.

We can calculate the distance they have to travel as their width less the 'window' width (200px in this case).

The texts in this snippet also have inline-block set so the auto width works.

ul {
  width: 200px;
  overflow: hidden;
  background: #f2f2f2;
}

li a {
  display: inline-block;
  white-space: nowrap;
  width: auto;
  transform: translateX(0%);
  transition: 4s ease-in-out;
}

.link:hover {
  color: red;
  transform: translateX(calc(-100% + 200px));
}
<ul>
  <li>
    <a class="link" href="#">Example of really long blog title goes here</a>
  </li>
  <li>
    <a class="link" href="#">Example of really long blog title goes here - this is a longer text</a>
  </li>
  <li>
    <a class="link" href="#">Example of really long blog title goes here - this is an even longer length to test</a>
  </li>
</ul>

user_108674540

Can you please check the below code? Hope it will work for you. You need to add style for li like below:

ul {
  width: 200px;
  overflow: hidden;
  padding: 0;
  background: #f2f2f2;
}

ul li {
  display: flex;
  display: -webkit-flex;
}

.link {
  display: block;
  white-space: nowrap;
  width: auto;
  transform: translateX(0%);
  transition: 4s ease-in-out;
}

.link:hover {
  color: red;
  transform: translateX(-100%);
}
<ul>
  <li>
    <a class="link" href="#">Example of really long blog title goes here</a>
  </li>
  <li>
    <a class="link" href="#">Example of really long blog title goes here - this is a longer text</a>
  </li>
  <li>
    <a class="link" href="#">Example of really long blog title goes here - this is an even longer length to test</a>
  </li>
</ul>

user_122138960
Related