Animation when changing element on hover

user_9256278 0
Viewed 72

I made 3 buttons to toggle server but I want to make the animation so if I hover my cursor on another server red background of names of servers will move to another. I don't know how to do this so it will be awesome if you'll suggest me! Here is HTML with CSS: 

.serverchoosediv{
  float: right;
  display: inline-block;
  height: 100%;
  align-items: center;
  display: flex;
  margin-right: 20px;
  font-family: arial;
}
.clickserver{
  text-align: center;
  text-decoration: none;
  color: #8e8e8e;
  padding: 0 20px;
  font-size: 14px;
  display: inline-block;
  border-radius: 20px;
  height: 100%;
}
.clickserver:hover{
  color: #fff;
  background-color: #ff3b3b;
}
.clickserver-inner{
  align-items: center;
  display: flex;
  height: 100%;
}
.serverchoosedivcolored{
  height: 70%;
  border-radius: 20px;
  background: #ebebeb;
}
      <div class="serverchoosediv">
        <div class="serverchoosedivcolored">
          <div class="clickserver">
            <div class="clickserver-inner">
              <a>Casual</a>
            </div>
          </div>
          <div class="clickserver">
            <div class="clickserver-inner">
              <a>Training</a>
            </div>
          </div>
          <div class="clickserver">
            <div class="clickserver-inner">
              <a>Expert</a>
            </div>
          </div>
        </div>
      </div>

css-transitions css html jquery javascript
1 Answers

I achieved the required effect using grids, ul and li. Here is the working snippet example:

.buttons{
  float: right;
  overflow: hidden;
  border-radius: 20px;
}

.btn{
  width: 80px;
  border: none;
  background: transparent;
}

.grid {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  grid-gap: 0;
  overflow: hidden;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 5px;
  height: auto;
}
.grid li {
  position: relative;
}

.grid li:hover ~ li:last-child:after,
.grid li:last-child:hover:after,
.grid li:hover ~ li:last-child:before,
.grid li:last-child:hover:before {
  opacity: 1;
  transition: 1s ease;
}

.grid li:last-child:after,
.grid li:last-child:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s, transform 1s 1s, background 1s;
  border: 0.5px solid #ff3b3b;
  border-radius: 10px;
  background: #ff3b3b;
  z-index: -1;
}

.grid li:nth-child(1):hover ~ li:last-child:after,
.grid li:nth-child(1):hover ~ li:last-child:before {
  transform: translate(-200%, 0);
}
.grid li:nth-child(2):hover ~ li:last-child:after,
.grid li:nth-child(2):hover ~ li:last-child:before {
  transform: translate(-100%, 0);
}
<div class='buttons'>
  <ul class="grid">
    <li>
      <a href="#">
        <button class="btn">
          Casual
        </button>
       </a>
    </li>
    
    <li>
     <a href="#">
        <button class="btn">
          Training
        </button>
       </a>
    </li>
    
    <li>
      <a href="#">
        <button class="btn">
          Expert
        </button>
       </a>
    </li>  
  </ul>
</div>

The transformation applied is absolute relative to the grid and if the number of buttons are increased, it will need alteration.

Basically, I have placed all the buttons in a list item (you can try with divs) and applied transform to those list items. This way the buttons seem to have flowing effect upon hover.

user_82317980
Related