Hover over this area to reveal the hidden text as it slides into view

My goal is to hover over truncated text and reveal the full length of the dynamic text. However, I am struggling with removing extra space at the end of shorter text when hovered and displaying all the text for longer ones.

I have a solution that almost works, but I need help refining it. You can view my Codepen here.

Below 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 advice on how to improve my implementation would be greatly appreciated!

htmlcsshover

Answer №1

The code provided is almost meeting the requirements, but we need the text to be translated by an amount equal to their widths minus the width of the viewing 'window', so that they end with their last character aligned to the right of this.

To calculate the distance they need to travel, it would be their width minus the width of the 'window' (which is set to 200px in this case).

This snippet also specifies inline-block for the texts, allowing the auto width property to function properly.

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>

Answer №2

Could you kindly review the code snippet below? I believe it should work well for your needs. Remember to apply styling for li as shown:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminate spaces within a string using JavaScript

In my quest for knowledge about trimming strings in JavaScript, I came across this intriguing discussion with a regex-based solution. After learning from the thread, I was under the assumption that trim would eliminate the space between "Hello" and "World ...

javascripthtmltrim

AngularJS Cascading Dropdowns for Enhanced User Experience

There is a merchant with multiple branches. When I select a merchant, I want another dropdown list to display the data from merchant.branches. The following code does not seem to be fixing the issue: <label>Merchant:</label> <select ng-if= ...

javascripthtmlangularjs

Looking for assistance in adding some animated flair to your website as users scroll

I don't have much experience in animation but I would like to create some animation effects on scroll down. Can anyone provide suggestions? I attempted using SVG paths, but it didn't work out as expected. What I am aiming for is that when a visi ...

javascripthtmljqueryanimationsvg-animate

Creating a replica of Airbnb using Bootstrap 5: Transforming the search bar into a button

I am looking to implement a search bar button similar to the one on airbnb using bootstrap 5, like this example: https://i.sstatic.net/oIIzv.png Here is an example of HTML code that you can use: <button type="button" class="btn btn-ligh ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for inserting a page break after every item in a loop in Visualforce when generating a PDF document

I need help with rendering a VF page as PDF. The VF page iterates over a list of account records using the repeat tag. I want to apply a page break for each element in the repeat tag. The code below is working, but it has an issue - it shows an empty PDF p ...

javascriptcsspdfsalesforcevisualforce

Efficiently rearranging elements by adjusting their top values techniques

My iPhone lockscreen theme features various elements displaying weather facts such as text and small images. Currently, these elements are positioned in the middle of the screen and I want to move them all to the top. Each element has a unique position abs ...

javascripthtmlcsspositioning

When utilizing CKEDITOR, the default TEXTAREA is obscured, and CKEDITOR does not appear

I am trying to incorporate CKEDITOR into my project. I have added the ckeditor script in the footer and replaced all instances of it. <script src="<?= site_url('theme/black/assets/plugins/ckeditor/ckeditor.min.js') ?>" type="text/javasc ...

javascriptjqueryhtmlcssckeditor

Unable to make colors appear in HTML5 canvas using .fillStyle

Trying my hand at canvas for the first time to create a game. I have an image displaying, but strangely the fillStyle method doesn't seem to be working as expected (the canvas background remains white in Google Chrome). Just a note that in my code, t ...

javascripthtmlhtml5-canvas

Modernized Style - Additional Scrolling Feature for List Element

I've implemented code from Google's Material Design website for my project: https://material.io/components/web/catalog/lists/ Although it works well, the issue arises when more list entries are added and I have to scroll down to view them. The p ...

htmlcssmaterial-design

Can you explain the significance of the characters '& > * + *' in JSX (CSS)?

When using material UI, the progressbar demo includes lines of JSX code like this: '& > * + *': { marginTop: theme.spacing(2), }, Can you explain what the selector '& > * + *' represents in this context? ...

cssreactjsjsx

Top and bottom fieldset legends in Bootstrap 4

Looking for suggestions on how to include legend text on the bottom border in bootstrap 4. I attempted to use position and margin, but it didn't work. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.mi ...

htmlcssbootstrap-4

Is it possible to integrate an html page within a wordpress website?

I'm a WordPress newbie but I have experience with HTML, CSS, JS, and PHP. Can anyone guide me on how to incorporate existing HTML pages into my WordPress site? I recently set up WordPress successfully on my domain hosted by GoDaddy (www.mydomain.com) ...

phpwordpresshtml

Injecting Custom HTML Tag through JavaScript on Page Load in Google Tag Manager

When attempting to inject events into the data layer upon loading DOM pages on my website, I encountered an issue. Since I lack access to the website code and developers are reluctant to make additions, I decided to implement this through a custom HTML tag ...

javascripthtmltagsgoogle-tag-managergoogle-datalayer

The unique design of the list extends beyond the boundary line

In my current project, I am utilizing next.js and MUI (material-ui). The component I am working with has the following structure: <Paper> <List> .. </List> </Paper> One issue I am facing is that when the list is scrolled, the ...

cssreactjsmaterial-ui

Achieving vertical centering by adjusting padding within the parent container

I've successfully set up a DIV with a height of 200px and an inner div at 150px, leaving me 50px for the image caption. Now I want to vertically center the text within that remaining 50px. .captioned { width: 300px; height: 200px; display: fl ...

htmlcss

Preserve the authentic picture along with a blur mask that can be dragged and applied to it

Is there a way to preserve the original image while having a draggable blur mask over it? If you want to see an example of a draggable blur mask over an image, you can check out this link: https://codepen.io/netsi1964/pen/AXRabW $(function() { $("#ma ...

javascriptjquerycsscanvas

The iframe is set to take the source URL from url.com/id using the "id" parameter

Currently, I am attempting to set the src of an iframe by extracting the URL from the toolbar address. The URL consists of the domain plus an ID, which happens to be the same as the YouTube ID. For instance: www.youtube.com/watch=id In my case, my domain ...

javascripthtmliframeyoutube

What could be causing this issue where the input button displays perfectly centered in Chrome, but not in IE and Firefox?

Have you noticed that this input button appears perfectly centered in Chrome, but in IE or Firefox it seems to be off to the right? You can see it as the second button on the right side of this page: Site : HTML : <div style="float:center;text-align: ...

htmlcss

How can we prevent the navigation from fading out when scrolling back up, as JQuery control the opacity of the Nav to fade in?

Looking for some guidance on jQuery assistance. I currently have a fixed navigation bar at the top of my webpage with an initial opacity set to 0 upon page load. As the user scrolls down, I want the navigation bar to fade in using the following code: fun ...

jquerycss

Apply CSS to give each line of text a box shadow effect

My CSS notebook creation featuring box-shadow and margin can be viewed here: JSFiddle The issue I'm facing is that when a line break occurs, the notebook row expands, causing it to lose its notebook-like appearance. Is there a way to ensure each line ...

cssword-wrap