Setting the property overflow:hidden on spans within an li element does not produce the desired result

I'm in the process of creating a fresh new website and I am looking to add some interesting hover effects to my list items (li).

Within my ul, there are three list items:

           <ul id="list">
               <li>HomePage</li>
               <li>About<span>Me</span></li>
               <li>Contact<span>Form</span></li>
           </ul>

The idea is to hide specific text portions like "Page" on HomePage, "Me" on AboutMe, and "Form" on ContactForm when hovering over the respective list item. To achieve this effect, I plan on incorporating a bit of JQuery code that will animate the width of the list item when hovered over and reveal additional content within spans.

Below is the CSS code being utilized for styling:

#list li{
    font-size:14px;
    color:#3ea9c1;
    overflow:hidden;
    height:60px;
    display:inline;
    width:20px;
    padding:25px;
    transition:1s ease;
}

Although I intend to minimize the use of Jquery due to concerns regarding CSS-related issues. Any guidance or assistance would be greatly appreciated! Thank you for your help.

csshtml-listsoverflow

Answer №1

Who needs Jquery when you can easily animate the font-size of the spans.

span {
  display: inline-block;
  font-size: 0;
  transition: 1s ease;
}
#list li {
  font-size: 14px;
  color: #3ea9c1;
  height: 60px;
  display: inline;
  width: 20px;
  padding: 25px;
}
#list li:hover span {
  font-size: 1rem;
}
<ul id="list">
  <li>Welcome <span>Message</span>
  </li>
  <li>Our Story <span>Here</span>
  </li>
  <li>Get in Touch <span>Now</span>
  </li>
</ul>

Answer №2

Do you really need jQuery for this? The CSS provided should work perfectly fine.

#list li{
    font-size:14px;
    color:#3ea9c1;
    overflow:hidden;
    height:60px;
    display:inline;
    width:20px;
    padding:25px;
    transition:1s ease;
}

#list li span {
    max-width: 0;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    transition: max-width 1s;
}
#list li:hover span {
    max-width: 200px;
}
<ul id="list">
               <li>Home<span>Page</span></li>
               <li>About<span>Me</span></li>
               <li>Contact<span>Form</span></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

How to use CSS to add a pseudo element to a table and position it outside of the parent's boundaries on the left

I am currently utilizing the "ag-grid" data-table library (along with Angular 2, although the framework is not crucial) which highlights a selected row (using the default class .ag-row) by adding the class .ag-row-selected to it. Each row contains numerous ...

angularcsssasspseudo-element

Why is Google Chrome cutting off parts of my website?

Has anyone encountered the strange rendering issue in Google Chrome? Check out this bug here http://community.mediabrowser.tv/uploads/site_1/126/annoying_rendering_bug.jpg I sometimes experience it when I visit What is causing this issue? Is there a way ...

htmlcssgoogle-chrome

Is there a way to incorporate a click function into this code if the id and xpath methods are ineffective?

Check out the code snippet below: <div class="btn-group" style="margin-top: -10px; box-shadow: none !important;"> <a class="btn btn-clear store-name headerActive" style="margin-left: 0px !important;" ng-click="account();" _href="#/app ...

cssxpathselenium-webdrivercss-selectorsclassname

Tips for incorporating LESS css into wordpress theme creation

After searching extensively on Google, I still haven't found a satisfactory answer to my question. Could someone please provide clear instructions on how to effectively utilize LESS CSS in WordPress theme development? I prefer not to rely on online sc ...

csswordpressless

Using the gradient property within the image tag gives you the ability

I've been attempting to add a gradient to my image, but it's not displaying properly .asdf img { background: rgb(2,0,36); background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); } <di ...

htmlcssbootstrap-4

Bootstrap: Troubleshooting Margin Problems

I am currently utilizing the Bootstrap sb admin template. I attempted to include 3 columns in a row, but encountered the issue of them being merged together with no space around them. I experimented by modifying the Bootstrap file through a CDN link and pr ...

htmltwitter-bootstrapcss

Mastering Bootstrap: Achieving flawless column stacking in succession

I am currently integrating bootstrap into my existing HTML code, but I only require it in two specific sections to avoid rewriting the entire code. Everything looks fine on my 1080p screen as intended. However, when I resize the screen slightly The titl ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to have the collapsible content automatically expanded upon loading?

I came across a tutorial on w3school (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol), which demonstrates collapsible content hidden by default. The code snippet from the link is provided below. Can someone assist me in cha ...

javascripthtmlcss

How can one efficiently implement a recursive dynamic expanding navigation bar in Angular, and what is the best method to toggle its menu items effectively?

I am currently developing an Angular 8 app and utilizing a bootstrap 4 layout in my project. One of the features I am working on is a menu with nested items, inspired by the Dynamic Expanding Nav Drawer example. The challenge I am encountering is that whe ...

htmlcssangularrecursion

Is there a way to adjust the width of my web layout without sacrificing its responsiveness?

Struggling with my website layout design as I encountered an issue. The overall width of the layout is too excessive, and I want to introduce some margins on the sides for a better visual appeal. Although the responsive design works well originally, adding ...

htmlcssresponsive-designbootstrap-5

Error encountered in Webpack when attempting to import SCSS into another SCSS file

I'm currently facing issues with Webpack (version 3.6.0) while trying to combine multiple SCSS files into a single external CSS file due to problems with parsing the @import statements. The entry index.js file includes: import './styles/main.scs ...

csswebpacksasswebpack-2

Is there a way to automatically scroll the page to the main content as soon as the user begins scrolling?

On my website, I want to have a full-screen image at the top followed by the main content right below it. I am looking for a way to automatically scroll the page down to the main content as soon as the user starts scrolling. How can I achieve this using ...

jqueryhtmlcss

Having difficulty animating the height transition of the NextJS Image component

On my webpage, I have a headerbar that changes size (from 120px to 70px) when the user scrolls down. I successfully implemented this transition using Tailwind classes and a height transition. Now, I am trying to make the site logo resize along with the hea ...

cssreactjsnext.js

How can I adjust the font size of information retrieved from a JSON file using ng2-smart-table?

I recently tried using the following CSS code: :host /deep/ ng2-smart-table {font-size:22px;} However, despite implementing this code, I have not noticed any change in the font size. ...

cssangular

When the cursor hovers over an item, I would like to enlarge its width while simultaneously shrinking the width of two additional items

Here is a section that I have created, you can view the mockup here. The section is divided into 3 parts, each taking up around 33.3% of the width and floated. My goal is to make it so that when a specific element, like .col-one in my example, is hovered ...

csssass

Replica of Spotify - Bottom Section - HTML and CSS Styling

I have been attempting to replicate the Spotify interface using only HTML and CSS. While I have successfully created the player section, I am struggling to center the player and incorporate the other two details as shown in the attached images. The 'G ...

htmlcssclone

Discover captivating visuals that effortlessly occupy the entire breadth, while gracefully encompassing a mere quarter of the total vertical space on the

It's become quite challenging for me to locate images that can occupy the entire width of a page while maintaining just 25% of the page height. Whenever I make adjustments to the image's CSS, it ends up appearing distorted because its width is di ...

cssimage

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript

Recently, I created a unique popup using HTML. You can see the complete code (excluding CSS) here: https://codepen.io/nope99675/pen/BawrdBX. Below is the snippet of the HTML: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

javascripthtmlcsswebencoding

Unifying hoverlabels in Plotly: A guide to editing them

While working on generating a graph with two contour lines, I encountered an issue with the hover menu that appears when hovering over the graph. The menu displays values of the two contours as shown in the image below: https://i.sstatic.net/oSQex.png Th ...

pythonhtmlcssplotlycontour

Position two glyphicon icons alongside an input field using Bootstrap

In order to fulfill a specific requirement, I need to position two glyphicons directly next to an input field. This means that the width of the input field should be reduced to accommodate the two icons. Unfortunately, the code below causes the glyphicon ...

htmltwitter-bootstrapcsstwitter-bootstrap-3