Hover bouncing effect

by Julien Roche

HTML

<div class="target">Some content</div>

CSS

div {
  background-color: lightgreen;
  border: 1px solid black;
  margin: 0.5rem;
  padding: 1rem;
}

.target {
  width: 100px;
  transition: width 0.6s cubic-bezier(0.2, 1.75, 0.5, 0.6);

  @media (hover: hover) {
    &:hover {
      width: 130px;
    }
  }
}