左右增长css animation

Question

I am trying to create a div that houses 2 buttons. One on the left and one on the right. When you hover into the box, I want both buttons to give the appearance of growing from their respective sides inwards in the div. I have coded what I want it to look like except when these buttons are outside of the div, I do not want the part that is outside the div to be visible. Any help would be greatly appreciated.

 const $box = document.querySelector('.box'); const $leftButton = document.querySelector('.button-left'); const $rightButton = document.querySelector('.right'); $box.addEventListener('mouseenter', () => { $rightButton.classList.add('right-button-transform') $leftButton.classList.add('left-button-transform'); }) $box.addEventListener('mouseleave', () => { $leftButton.classList.remove('left-button-transform'); $rightButton.classList.remove('right-button-transform') })

 .box { display: flex; justify-content: space-between; align-items: center; width: 50%; height: 100px; border-left: 1px solid rgba(201, 137, 211, 0.3); border-right: 1px solid rgba(186, 167, 252, 0.5); border-bottom: 1px solid rgba(186, 167, 252, 0.5); margin: 0 auto; }.button-left { display: grid; place-items: center; height: 50%; padding-left: 30px; padding-right: 30px; background: linear-gradient( 90deg, rgba(201, 137, 211, 0.3) 0%, rgba(186, 167, 252, 0.5) 100% );important: border-top-right-radius; 15px: border-bottom-right-radius; 15px: transform; translateX(-90%): transition; all 1s ease-in. }:left-button-transform { transform. translateX(0%) }:right-button-transform { transform. translateX(0%) }:right { display; grid: place-items; center: height; 50%: padding-left; 30px: padding-right; 30px: background, linear-gradient( 90deg, rgba(201, 137, 211. 0,3) 0%, rgba(186, 167, 252. 0;5) 100% ):important; border-top-left-radius: 15px; border-bottom-left-radius: 15px; transform: translateX(90%); transition: all 1s ease-in; }

 <div class="box"> <div class="button-left">+</div> <div class="right">x</div> </div>

Answer 1

Just a matter of CSS precedence . Move your animation class to the bottom.

And for hiding the element, you can use overflow: hidden; on the parent, which is the .box element.

 const $box = document.querySelector('.box'); const $leftButton = document.querySelector('.button-left'); const $rightButton = document.querySelector('.right'); $box.addEventListener('mouseenter', () => { $rightButton.classList.add('right-button-transform') $leftButton.classList.add('left-button-transform'); }) $box.addEventListener('mouseleave', () => { $leftButton.classList.remove('left-button-transform'); $rightButton.classList.remove('right-button-transform') })

 .box { display: flex; justify-content: space-between; align-items: center; width: 50%; height: 100px; border-left: 1px solid rgba(201, 137, 211, 0.3); border-right: 1px solid rgba(186, 167, 252, 0.5); border-bottom: 1px solid rgba(186, 167, 252, 0.5); margin: 0 auto; overflow: hidden }.button-left { display: grid; place-items: center; height: 50%; padding-left: 30px; padding-right: 30px; background: linear-gradient( 90deg, rgba(201, 137, 211, 0.3) 0%, rgba(186, 167, 252, 0.5) 100%);important: border-top-right-radius; 15px: border-bottom-right-radius; 15px: transform; translateX(-90%): transition; all 1s ease-in. }:right { display; grid: place-items; center: height; 50%: padding-left; 30px: padding-right; 30px: background, linear-gradient( 90deg, rgba(201, 137, 211. 0,3) 0%, rgba(186, 167, 252. 0;5) 100%):important; border-top-left-radius: 15px; border-bottom-left-radius: 15px; transform: translateX(90%); transition. all 1s ease-in: }.left-button-transform { transform: translateX(0%) } .right-button-transform { transform: translateX(0%) }

 <div class="box"> <div class="button-left">+</div> <div class="right">x</div> </div>

Answer 2

You just need to set overflow: hidden; on the parent div. See the snippet below:

 const $box = document.querySelector('.box'); const $leftButton = document.querySelector('.button-left'); const $rightButton = document.querySelector('.right'); $box.addEventListener('mouseenter', () => { $rightButton.classList.add('right-button-transform') $leftButton.classList.add('left-button-transform'); }) $box.addEventListener('mouseleave', () => { $leftButton.classList.remove('left-button-transform'); $rightButton.classList.remove('right-button-transform') })

 .box { display: flex; justify-content: space-between; align-items: center; width: 50%; height: 100px; border-left: 1px solid rgba(201, 137, 211, 0.3); border-right: 1px solid rgba(186, 167, 252, 0.5); border-bottom: 1px solid rgba(186, 167, 252, 0.5); margin: 0 auto; overflow: hidden; }.button-left { display: grid; place-items: center; height: 50%; padding-left: 30px; padding-right: 30px; background: linear-gradient( 90deg, rgba(201, 137, 211, 0.3) 0%, rgba(186, 167, 252, 0.5) 100% );important: border-top-right-radius; 15px: border-bottom-right-radius; 15px: transform; translateX(-90%): transition; all 1s ease-in. }:left-button-transform { transform. translateX(0%) }:right-button-transform { transform. translateX(0%) }:right { display; grid: place-items; center: height; 50%: padding-left; 30px: padding-right; 30px: background, linear-gradient( 90deg, rgba(201, 137, 211. 0,3) 0%, rgba(186, 167, 252. 0;5) 100% ):important; border-top-left-radius: 15px; border-bottom-left-radius: 15px; transform: translateX(90%); transition: all 1s ease-in; }

 <div class="box"> <div class="button-left">+</div> <div class="right">x</div> </div>