[Solved] Seamless onClick animated s

by


Use this as the basis to fit it to you use-case. Works on hover on any section.

Snippet:

* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
.parent {
  width: 100vw; height: 120px;
  display: flex;
  flex-direction: columns;
}
.parent > div { 
  background-color: #ddd; text-align: center; padding: 12px 8px;
  flex: 1 1 10%;
  transition: all 500ms;
}
.parent > div:hover {
  flex: 1 1 80%;
}
.parent > div:first-child { background-color: #d33; }
.parent > div:last-child { background-color: #33d; }
<div class="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

1

solved Seamless onClick animated

s