Эффект медленной упругости при наведении с использованием CSS и JS

document.addEventListener("DOMContentLoaded", function() {
  const item1 = document.getElementById("item1");
  const items = document.querySelectorAll(".item");

  item1.classList.add("initial");

  items.forEach(item => {
    if (item.id !== "item1") {
      item.addEventListener("mouseenter", () => {
        if (window.innerWidth > 786) { // Only apply hover effects if screen width is larger than 768px
          items.forEach(i => i.classList.remove("hovered"));
          item.classList.add("hovered");
          item1.classList.remove("initial");
          
          const initialContent = item1.querySelector('.initial-content');
          const hiddenContent = item1.querySelector('.hidden-content');
          
          if (initialContent) 
            initialContent.style.display = 'none';
            
          if (hiddenContent) 
            hiddenContent.style.display = 'block';
        }
      });

      item.addEventListener("mouseleave", () => {
        if (window.innerWidth > 786) { // Only apply hover effects if screen width is larger than 768px
          items.forEach(i => i.classList.remove("hovered"));
          item1.classList.add("initial");
          
          const initialContent = item1.querySelector('.initial-content');
          const hiddenContent = item1.querySelector('.hidden-content');
          
          if (initialContent) 
            initialContent.style.display = 'block';
            
          if (hiddenContent) 
            hiddenContent.style.display = 'none';
        }
      });
    }
  });
});


var mobilevideo = document.getElementsByTagName("video")[0];
mobilevideo.setAttribute("playsinline", "");
mobilevideo.setAttribute("muted", "");

.ccontainer {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  gap: 15px;
  height: 100%;
  flex-direction: row;
}

.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 30%;
  border-radius: 20px;
  overflow: hidden;
  color: #030043;
  text-align: left;
  position: relative;
  background: linear-gradient(180deg, #F0EEF3 0%, #B3C8FF 100%);
  font-family: Everett, sans-serif;
}

.item.hovered {
  width: 54%;
  background-color: #e0e0e0;
  /*animation: horizontalBounce 0.5s;*/
}

#item1.initial {
  width: 54%;
  background-color: #e0e0e0;
  /*animation: horizontalBounce 0.5s;*/
}

.content {
  z-index: 99;
  flex: 1;
  height: 110%;
  padding: 55px 20px 20px;
}

.image {
  display: none;
  width: 320px;
  height: auto;
  margin-top: 2rem;
  margin-bottom: -5px;
}

.item#item1.initial .image,
.item.hovered .image {
  display: block;
}

button {
  color: white;
  padding: 4px 30px;
  font-size: 18px;
  line-height: 35px;
  gap: 10px;
  border: none;
  background: linear-gradient(90deg, #0063EC 0%, #012681 100%);
  border-radius: 100px;
  font-family: Everett, sans-serif;
  position: absolute;
  bottom: 1.3rem;
}

.content p,
.heading2 {
  font-family: Everett, sans-serif;
  font-weight: 500;
  font-size: 30px;
  margin: 15px 0 10px;
  color: #030043;
}

.cont ul {
  margin: 1rem 0;
  padding-left: 5px;
  list-style-type: none;
  /* Remove the default list style */
}

.cont ul li {
  list-style-image: url('https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66be3617b3d309575b7840e0_Vector.png');
  margin: 0 0 9px 20px;
  /* Adjust margin as needed */
  line-height: 22px;
  color: #030043;
  font-size: 14px;
}

.cont p {
  line-height: 23px;
  color: #030043;
  max-width: 320px;
  font-size: 14px;
}

button a {
  color: #fff;
}

button:hover {
  background-color: #0056b3;
}

.item.hovered .initial-content {
  display: none;
}

.item.hovered .hidden-content {
  display: block;
}

.hidden-content {
  display: none;
}

.initial-content {
  display: block;
}

.cont {
  display: flex;
  flex-direction: column;
  height: 90%;
}

.initial-content,
.hidden-content {
  height: 80%;
}

@keyframes horizontalBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(10px);
  }
}

@media (max-width: 768px) {
  .cont ul {
    display: none;
  }
  #item1.initial {
    width: 100%;
  }
  #item1.initial .content .initial-content,
  #item1.initial .content .image {
    display: none;
  }
  #item1.initial .content .hidden-content {
    display: block;
  }
  .item#item1.initial .image,
  .item.hovered .image {
    display: none;
  }
  .ccontainer {
    flex-direction: column;
    align-items: center;
  }
  .item {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
  }
  .item.hovered {
    width: 100%;
  }
  .image {
    width: 85%;
    height: auto;
    display: none;
    margin-left: 50px;
    margin-top: 1.5rem;
  }
  .content {
    padding: 20px 20px 5px;
  }
  button {
    position: relative;
    width: 100%;
    margin-top: 1.4rem;
  }
  .initial-content button {
    bottom: 1.5rem;
    position: absolute;
    width: 79%;
  }
  #item1 .initial-content button {
    bottom: 1.5rem;
    position: absolute;
    width: 79%;
  }
  #item1 .hidden-content button {
    margin-top: 4rem;
  }
  /* .initial-content {
            display: none;
        }
        .hidden-content {
            display: block;
        }*/
}

@media (max-width: 480px) {
  .item {
    padding: 10px 0 0 10px;
    min-height: 330px;
  }
  h2 {
    font-size: 18px;
  }
  .heading-2 span {
    padding-right: 7px;
  }
}

<div class = "ccontainer">
  <div class = "item" id = "item1">
    <div class = "content">
      <div class = "hidden-content">
        <img src = "https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt = "icon" />
        <p class = "heading2">Property Owners</p>
        <div class = "cont">
          <p>Keyper unlocks an array of services that help you manage your property with unparalleled efficiency, from financing options to portfolio monitoring and market insights.
          </p>
        </div>
        <a href = "/property-owner"><button>Learn more</button></a>
      </div>
      <div class = "initial-content">
        <img src = "https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt = "icon" />
        <p class = "heading2">Property Owners</p>
        <div class = "cont">
          <p>Keyper unlocks an array of services that help you manage your property with unparalleled efficiency, from financing options to portfolio monitoring and market insights.
          </p>
          <ul>
            <li>Cash out on your tenant’s outstanding rent any time and receive it digitally.</li>
            <li>Track your property's valuation & activity and that of properties like yours. </li>
            <li>Experience full-service property management. Buying, selling, leasing & financing. We'll handle it all.</li>
          </ul>
        </div>
        <a href = "/property-owner"><button>Learn more</button></a>
      </div>
    </div>
    <img src = "https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66c7048bbd323fa74ca1f934_Property%20Owner%20Image.png" class = "image" alt = "Image 1">
  </div>
  <div class = "item" id = "item2">
    <div class = "content">
      <div class = "initial-content">
        <img src = "https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt = "icon" />
        <p class = "heading2">Tenants</p>
        <div class = "cont">
          <p>Say hello to pain free rent! With Keyper, you can pay your yearly rent in 12 installments by card. It’s what we like to call Rent Now, Pay Later or RNPL for short.</p>
        </div>
        <a href = "https://t.realkeyper.com/tenants"><button>Learn more</button></a>
      </div>
      <div class = "hidden-content">
        <img src = "https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt = "icon" />
        <p class = "heading2">Tenants</p>
        <div class = "cont">
          <p>Say hello to pain free rent! With Keyper, you can pay your yearly rent in 12 installments by card. It’s what we like to call Rent Now, Pay Later or RNPL for short.</p>
          <ul>
            <li>Enjoy monthly rent payments, no matter your landlord’s terms.</li>
            <li>Drop the cheque book and unlock bank rewards when you pay by card.</li>
            <li>Find the perfect home that meets your preferred payment terms on Keyper’s marketplace.</li>
          </ul>
        </div>
        <a href = "https://t.realkeyper.com/tenants"><button>Learn more</button></a>
      </div>
    </div>
    <img src = "https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66c7048ca48207cc04c4aeac_Tenants%20Image.png" class = "image" alt = "Image 2">
  </div>
  <div class = "item" id = "item3">
    <div class = "content">
      <div class = "initial-content">
        <img src = "https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt = "icon" />
        <p class = "heading2">Partners</p>
        <div class = "cont">
          <p>Grow your sales with Keyper! Elevate your clients’ experience with an array of services designed to help them manage their property. The best part? You’ll earn a commission for every property you refer.</p>
          <!--a href = "https://keyper-website-4.webflow.io/partners"--><button>Learn more</button>
          <!--/a-->
        </div>
      </div>
      <div class = "hidden-content">
        <img src = "https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66b0cbe1e7741c9e30daf857_Icon.png" alt = "icon" />
        <p class = "heading2">Partners</p>
        <div class = "cont">
          <p>Grow your sales with Keyper! Elevate your clients’ experience with an array of services designed to help them manage their property. The best part? You’ll earn a commission for every property you refer.</p>
          <ul>
            <li>Earn a minimum of AED 2,000 for each successful referral.</li>
            <li>Close deals faster by offering tenants the option to pay their rent monthly.</li>
            <li>Your clients are always yours to keep.</li>
          </ul>
        </div>
        <!--a href = "https://keyper-website-4.webflow.io/partners"--><button>Learn more</button>
        <!--/a-->
      </div>
    </div>
    <img src = "https://uploads-ssl.webflow.com/66ac6355674df55afff1135a/66c7048be2b6c800111808fc_Partners%20Image.png" class = "image" alt = "Image 3">
  </div>
</div>