.main { height: 100%; position: relative; z-index: 0; overflow: auto; } .tab-yes { height: 100%; width: 3%; float: left; position: relative; z-index: 1; background: var(--yes); } .tab-home { height: 100%; width: 3%; float: left; position: relative; z-index: 1; background: var(--home); } .tab-home:hover { width: 4%; transition: 0.2s; } .tab-yes:hover ~ .tab-home { width: 5%; transition: 0.2s; } .tab-yes:hover { width: 4%; transition: 0.2s; } /* Archive. */ .feed-archive { height: 100%; display: flex; position: relative; flex-wrap: wrap; overflow: auto; justify-content: space-between; } .archive { max-height: 20%; max-width: 25%; background: white; border-radius: 14px; padding: 1rem; margin: 0.5rem; overflow: hidden; position: relative; } .archive:hover { background: linear-gradient(to left, var(--no) 50%, var(--yes) 50%); cursor: pointer; transition: 0.8s; color: white; overflow: auto; }