Html - Transition Element Displaying on hover

Alex
April 26, 2024
111 views
0 votes
2 Answers

I have a side-menu of some icons. Upon hovering over the icons, their text displays to the right. I’d like to be able to have the text show up/have the div expand in a smooth sliding transition. Ideally, if possible, without writing any extra javascript.

Is this possible?

: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/[email protected]/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>

Answers

U cant animate display property, but u can animate opacity. I deleated util class d-none, change display:none on opacity:0 and set transition property. Enjoy!
More about transition https://developer.mozilla.org/en-US/docs/Web/CSS/transition

: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/[email protected]/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>

You can introduce a transition property for the width. But you would have to define the width with numbers.

: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/[email protected]/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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Transition Element Displaying on hover

Answers