Home How to block the width extension of sibling elements when creating a hover with a css transition

Questions

How to block the width extension of sibling elements when creating a hover with a css transition

July 7, 2022

I need to increase the width of a list of elements when I hover over a certain element using a CSS transition.
The CSS functionality works, but the problem is that the hover moves the sibling elements. How can this problem be overcome with CSS?

.aside-menu__element {
  width: 68px;
  height: 68px;
  background-color: #999;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 1s;
}

.aside-menu__element:hover {
  background-color: green;
  border-radius: 20px;
  width: 300px;
}

<div class="aside-menu">
  <div class="aside-menu__element"><i class="fa-solid fa-arrow-up-long"></i></div>
  <div class="aside-menu__element"><i class="fa-solid fa-arrow-right-long"></i></div>
  <div class="aside-menu__element"><i class="fa-solid fa-arrow-left-long"></i></div>
</div>

The link below shows the HTML and CSS code I used: codepen

>Solution :

just add this code

.aside-menu { 
  position:fixed;
  right:50px;
  top:150px;
  display: flex;    
  align-items: flex-end;
  flex-direction: column;
}

working sample codepen

.aside-menu {
    position:fixed;
    right:50px;
    top:0px;
   display: flex;    
  align-items: flex-end;
  flex-direction: column;
}

.aside-menu__element {
     width: 68px;
    height: 68px;
    background-color: #999;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 1s;
}

.aside-menu__element:hover {
    background-color: green;
    border-radius: 20px;
    width: 300px;
}

<div class="aside-menu">
  <div class="aside-menu__element"><i class="fa-solid fa-arrow-up-long"></i></div>
    <div class="aside-menu__element"><i class="fa-solid fa-arrow-right-long"></i></div>
    <div class="aside-menu__element"><i class="fa-solid fa-arrow-left-long"></i></div>
</div>