Revealing Transition Element on mouseover

My side-menu consists of icons that display text to the right upon hovering over them. I want the text to show up and the div to expand smoothly with a sliding transition, ideally without the need for additional JavaScript.

Is there a way to achieve this?

:root {
    --darkblack: #000615;
    --black: #0B1721;
    --lightblack: #141B37;
    --yellow: #F7C921;
    --darkyellow: #a28b2a;
    --cyan: #21B7FF;
    --darkcyan: #1c7eaf;
    --magenta: #FF217D;
    --darkmagenta: #531a3b;
}

.nav {
  align-items: flex-end;
}

.nav-pills .nav-link {
  width: fit-content;
}

.nav-pills .nav-link.active {
   color: var(--black) !important;
   background-color: var(--cyan);
 }

.nav-pills .nav-link:not(.nav-link.active) {
  color: var(--cyan) !important;
  cursor: pointer;
}

.nav-pills .nav-link:hover > .nav-title {
  display: inline !important;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21434e4e55525553405161140f110f13">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<div class="row">
  <div class="col-10">
    
  </div>
  <div class="col-2">
    
    <ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
            <i class="fa-solid fa-book"></i>
            <span class="d-none nav-title">Bio</span>
        </a>
    </li>
    <li>
        <a class="nav-link" data-id="tags">
            <i class="fa-solid fa-tags"></i>
            <span class="d-none nav-title">Tags</span>
        </a>
    </li>
</ul>
    
  </div>
</div>

htmlcssbootstrap-5

Answer №1

Implementing a transition property for the width can create a smooth effect. Make sure to set the width using numerical values.

:root {
  --darkblack: #000615;
  --black: #0B1721;
  --lightblack: #141B37;
  --yellow: #F7C921;
  --darkyellow: #a28b2a;
  --cyan: #21B7FF;
  --darkcyan: #1c7eaf;
  --magenta: #FF217D;
  --darkmagenta: #531a3b;
}

.nav {
  align-items: flex-end;
}

.nav-pills .nav-link {
  width: fit-content;
}

.nav-pills .nav-link.active {
  color: var(--black) !important;
  background-color: var(--cyan);
}

.nav-pills .nav-link:not(.nav-link.active) {
  color: var(--cyan) !important;
  cursor: pointer;
}

.nav-pills .nav-link>.nav-title {
  transition: 500ms;
  width: 0px;
  display: inline-block;
  position: relative;
  top: +5px;
  overflow: hidden;
}

.nav-pills .nav-link:hover>.nav-title {
  width: 50px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e0ededf6f1f6f0e3f2c2b7acb2acb0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

<div class="container">
  <div class="row">
    <div class="col-12">

      <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
          <a href="#" class="nav-link active" aria-current="page">
            <i class="fa-solid fa-book"></i>
            <span class="nav-title">Bio</span>
          </a>
        </li>
        <li>
          <a class="nav-link" data-id="tags">
            <i class="fa-solid fa-tags"></i>
            <span class="nav-title">Tags</span>
          </a>
        </li>
      </ul>

    </div>
  </div>
</div>

Answer №2

Do you know that you can't animate the display property, but you can animate opacity? By removing the util class d-none, changing display:none to opacity:0 and setting the transition property, you can achieve the desired effect. Enjoy! Find out more about transitions here

:root {
    --darkblack: #000615;
    --black: #0B1721;
    --lightblack: #141B37;
    --yellow: #F7C921;
    --darkyellow: #a28b2a;
    --cyan: #21B7FF;
    --darkcyan: #1c7eaf;
    --magenta: #FF217D;
    --darkmagenta: #531a3b;
}

.nav-title {
  opacity: 0;  
  transition: all 0.5s ease;
}

.nav {
  align-items: flex-end;
}

.nav-pills .nav-link {
  width: fit-content;
}

.nav-pills .nav-link.active {
   color: var(--black) !important;
   background-color: var(--cyan);
 }

.nav-pills .nav-link:not(.nav-link.active) {
  color: var(--cyan) !important;
  cursor: pointer;
}

.nav-pills .nav-link:hover > .nav-title {
  opacity: 1;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33515c5c47404741524373061d031d01">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="row">
  <div class="col-10">
    
  </div>
  <div class="col-2">
    
    <ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
            <i class="fa-solid fa-book"></i>
            <span class="nav-title">Bio</span>
        </a>
    </li>
    <li>
        <a class="nav-link" data-id="tags">
            <i class="fa-solid fa-tags"></i>
            <span class="nav-title">Tags</span>
        </a>
    </li>
</ul>
    
  </div>
</div>

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

Could the Google Font "Exo 2" be causing the size issue with HTML Canvas 2DContext.font?

As I work on creating a canvas and adding text to it, I have encountered an issue with the font Exo 2. Every other font works perfectly except for this one. Exo 2 is a Google font, and my suspicion is that the number "2" at the end of the name might be ca ...

htmlcanvasthree.jshtml5-canvaswebfonts

Choosing an item from a dropdown menu in C# using Selenium in web assembly is proving to be ineffective

I am currently working on some automated tests using Selenium Web driver. I have been able to write a script that can locate the class, but I am facing difficulties in selecting one of the items from the drop down menu. Here is the script I have so far: ...

c#htmlseleniumautomated-tests

The spacing in the Superfish menu is not aligned correctly

I am encountering a spacing issue with a superfish drop down menu. The problem can be observed here: To view the issue in action, visit this link: Essentially, all of the submenu items are floated left with a 50% width. I am looking for a solution to rem ...

htmlcsswordpress

How can you adjust the width of the Material UI Select component?

Trying to customize the width of the Material UI Select component can be a bit tricky. To set the desired width, you need to assign a specific class to the FormControl component. This class, such as mw-120, should define the minimum width as 120px in your ...

htmlcssreactjsmaterial-designmaterial-ui

Retrieve the site's title content using PHP

I created a code to scrape website content from platforms like Facebook and Google+. $html = file_get_contents_curl($url); if ($html) { //parsing begins here: $doc = new DOMDocument(); @$doc->loadHTML($html); $nodes = $doc ...

phphtmlregexdomcurl

The CSS rule that is determined to have the nearest bounding class will emerge victorious

Imagine this interesting situation in HTML: <div class="red"> <div class="blue"> ... <-- maybe more nested parents <div class="x">Test</div> </div> </div> If we consider the following ...

htmlcsscss-selectors

Styling text in JavaScript and CSS with colored fonts and underlines

I am looking to customize the CSS for the font style. <div id="a" onmouseover="chbg('red','b')" onmouseout="chbg('white','b')">This will change b element</div> <div id="b">This is element b</div ...

javascripthtmlcss

What is the best way to use margin-top and margin-bottom in CSS?

Looking to perfectly center this modal in the middle of the screen with some margin all around. However, struggling to apply margin specifically to the top and bottom! export function Modal() { return ( <div className="fixed inset-0 z-[60] ...

cssreactjstailwind-css

Steps to create a loading bar that starts loading when an ajax task begins

What is the best way to show a loading bar as an AJAX task begins on a page? Additionally, how can we make sure that hitting the back button will return to what was being viewed before that specific AJAX task? ...

htmlajax

Margins and borders with a negative impact

I have a collection of images that I am trying to stack using negative margins. However, because stacking them without defined boundaries can lead to visual confusion, I thought about adding borders around each image. Surprisingly, while the images are sta ...

csscross-browsermargin

Creating a responsive design for a cropped image using CSS

Hi there! I am using a cropped image as the background for the top of my webpage, with a fixed size defined in pixels for the containing div. The issue arises when I resize the browser window, causing the image to cover most of the page instead of just the ...

htmlcssresponsive-imagesbackground-size

Troubleshooting: Navbar dropdown menu in AngularJS gets hidden within UI layout

After spending some time trying to understand why the NavBar drop-down is getting overlapped inside the ui-layout, I realize that I must be overlooking some basic steps. This issue seems so simple, yet it is eluding me. To see the details of the problem, ...

cssangularjstwitter-bootstrap

Determining the number of columns and rows within an HTML table

Is there a way to determine the number of columns and rows in an HTML file? How can we accurately count the total number of td tags present within the HTML file? ...

c#.nethtmlwinformscount

I possess a compilation of URL links and I am seeking to identify the specific HTML div that corresponds to each URL within a webpage

Could you please help me figure out which HTML div each URL belongs to on a webpage using Java? I have a list of URLs that need to be matched with their respective HTML divs. ...

javahtmljsoup

What can I do to ensure that the selectInput choices in Shiny are easily accessible and visible to the user?

When running the code provided below, I encountered an issue where the options in the selectInput() were partially blocked by the bottom edge of the wellPanel(). This problem is illustrated in the image below. Users had to adjust the mouse wheel to see all ...

htmlcssrshinyselectinput

Tips for deactivating the double class with jQuery

I need to implement a feature where all classes on a button are disabled if a specific class is present. I attempted to disable all classes, but it seems like I made an error somewhere. Jquery: if ($('.lgi_btn_cta_toggle').hasClass('lgi_ct ...

jquerycss

What is the most efficient method for applying multiple classNames to elements in Next.js?

Could you provide me with a list of all methods, both with and without packages? Also, I'm interested in knowing why one method is considered better than the others. ...

cssreactjsnext.js

What is the best way to dynamically render classes based on conditions in a table using React Bootstrap?

I am looking for a way to dynamically change the color of a class based on the transaction data in a table. import React from "react"; import Table from "react-bootstrap/Table"; import "./TableComponent.css"; const TableComponent = ({ Movement }) =&g ...

javascriptcssreactjsbootstrap-4react-bootstrap

Troublesome alignment with bootstrap grid system

I require some assistance with the following: https://i.sstatic.net/vK9zmm.png Specifically, I need help regarding the structure shown below: <div class="row"><div class="col-md-4"> <a class="individ" href="index.p ...

phphtmlcsstwitter-bootstrap

The footers on each page are not consistent

I have noticed that two pages utilizing the same CSS are displaying differently. Check them out here: 128.48.204.195:3000 128.48.204.195:3000/formats If you look closely, you'll see that below the footer, the /formats page appears to have no extra s ...

htmlcsslayout