Мобильная версияSo, I was trying to clone the website of Rivian, I had a component which contains 2 boxes, and they have some hover animations similar to the one seen on the websites. The animation on the left box is working perfectly fine that it the right box shrinks a little to the right giving space for box1 to expand.But the same thing is not working for box2. Here's the code:
Configurator.jsx
import "./configurator.css"; const Configurator = () => { return ( Vehicles made for the
planet Whether taking families on new adventures or
electrifying fleets at scale, our vehicles all share a
common goal — preserving the natural world for
generations to come. R1T | Up to 410 miles of range
Configure Shop Available R1T | Up to 410 miles of range
Configure Shop Available ); }; export default Configurator; configurator.css
.container { display: flex; height: 80vh; width: 100%; } .box1, .box2 { transition: transform 0.5s ease-in-out; } .box1:hover, .box2:hover { transform: scaleX(1.1); } .box1 .box-content { transition: transform 0.5s ease-in-out; } .box2 .box-content { transition: transform 0.5s ease-in-out; } .box1:hover .box-content { transform: scaleX(0.9091); } .box1:hover ~ .box2 { transform: translateX(3%); } .box2:hover .box-content { transform: scaleX(0.9091); } .box2:hover ~ .box1 { transform: translateX(3%); } I tried playing around with some CSS and some properties of the component itself, but was not able to get it working properly, the box2 expands but the box1 does not shrinks maintaining the gap between them. I want the two boxes to work the exact same way as it does on Rivian
Источник: https://stackoverflow.com/questions/780 ... -component
