Question 46112 in CSS Question posted in
Some basic documentation can be found here.

Text that expands on hovering – CSS

I’m creating a text using CSS. The idea is that the text increases in size when hovered on, like the apple taskbar. I am attaching my code below; although the text is expanding, there seems to be a problem with the positions of the text.It is effecting the position of other elements in the navbar. I tried different position types to solve this, but it seems not working. It will be helpful if anyone can find the error

.nav-list {
  position: relative;
  display: inline-flex;
  top: 2.2rem;
}

.nav-list li {
  position: relative;
  left: 215%;
  padding: 0 20px 0 20px;
}

.nav-list a {
  font-weight: 500;
}

.nav-list>li>a::after {
  content: "";
  position: absolute;
  background-color: #ff2a00;
  height: 4px;
  width: 0;
  left: 0;
  bottom: -10px;
}

.nav-list>li:hover>a::after {
  width: 100%;
}

.nav-list>li>a {
  font-size: 16px;
  transition: font-size 0.5s ease;
}

.nav-list>li:hover>a {
  font-size: 20px;
  transition: font-size 0.5s ease;
}
<div class="watashiva">
  <ul class="nav-list">
    <li><a href="">MEN</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">WOMEN</a></li>
  </ul>
</div>
Tags:

2

Answers


  1. 0

    Just set a width on the li elements. This will prevent them from expanding and shifting the other elements.

    .nav-list {
  position: relative;
  display: inline-flex;
  top: 2.2rem;
}

.nav-list li {
  position: relative;
  left: 215%;
  padding: 0 20px 0 20px;
  width: 100px; /* this line fixes your issue */
}

.nav-list a {
  font-weight: 500;
}

.nav-list>li>a::after {
  content: "";
  position: absolute;
  background-color: #ff2a00;
  height: 4px;
  width: 0;
  left: 0;
  bottom: -10px;
}

.nav-list>li:hover>a::after {
  width: 100%;
}

.nav-list>li>a {
  font-size: 16px;
  transition: font-size 0.5s ease;
}

.nav-list>li:hover>a {
  font-size: 20px;
  transition: font-size 0.5s ease;
}
    <div class="watashiva">
  <ul class="nav-list">
    <li><a href="">MEN</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">WOMEN</a></li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0

    If you want to text expand when hovering it, just use CSS transform: scale(x) (🔗). It makes the remaining text not affected.
    Just change

    .nav-list>li:hover>a {
  font-size: 20px;
  transition: font-size 0.5s ease;
}

    to

    .nav-list>li:hover {
  transform: scale(1.25);
  transition: transform 0.5s ease;
}

    Full code:

    .nav-list {
  position: relative;
  display: inline-flex;
  top: 2.2rem;
}

.nav-list li {
  position: relative;
  left: 215%;
  padding: 0 20px 0 20px;
}

.nav-list a {
  font-weight: 500;
}

.nav-list>li>a::after {
  content: "";
  position: absolute;
  background-color: #ff2a00;
  height: 4px;
  width: 0;
  left: 0;
  bottom: -10px;
}

.nav-list>li:hover>a::after {
  width: 100%;
}

.nav-list>li>a {
  font-size: 16px;
  transition: font-size 0.5s ease;
}

.nav-list>li:hover {
  /* font-size: 20px;
  transition: font-size 0.5s ease; */
  transition: transform 0.5s ease;
  transform: scale(1.25);
}
    <div class="watashiva">
  <ul class="nav-list">
    <li><a href="">MEN</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">WOMEN</a></li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search