<html>  <head>  <style>         :root {   --hover-width: 75%;   --other-width: 25%;   --speed: 1000ms; } html, body { height: 100%; overflow-x: hidden; } h1 {   font-size: 4rem;   color: #fff;   position: absolute;   left: 50%;   top: 20%;   transform: translateX(-50%);   white-space: nowrap; } .button {   display: block;   position: absolute;   left: 50%;   top: 40%;   height: 2.5rem;   padding-top: 1.3rem;   width: 15rem;   text-align: center;   color: #fff;   border: #fff solid 0.2rem;   font-size: 1rem;   font-weight: bold;   text-transform: uppercase;   text-decoration: none;   transform: translateX(-50%); } .split.left .button:hover {   background-color: var(--left-button-hover-color);   border-color: var(--left-button-hover-color); } .split.right .button:hover {   background-color: var(--right-button-hover-color);   border-color: var(--right-button-hover-color); } .container {   position: relative;   width: 100%;   height: 100%;   background: var(--container-bg-color); } .split {   position: absolute;   width: 50%;   height: 100%;   overflow: hidden; } .split.left {   left:0;   background: url('https://images.pexels.com/photos/53610/large-home-residential-house-architecture-53610.jpeg') center center no-repeat;   background-size: cover; } .split.left:before {   position:absolute;   content: "";   width: 100%;   height: 100%;   background: var(--left-bg-color); } .split.right {   right:0;   background: url('https://images.pexels.com/photos/101808/pexels-photo-101808.jpeg') center center no-repeat;   background-size: cover; } .split.right:before {   position:absolute;   content: "";   width: 100%;   height: 100%;   background: var(--right-bg-color); } .split.left, .split.right, .split.right:before, .split.left:before {   transition: var(--speed) all ease-in-out; } .hover-left .left {   width: var(--hover-width); } .hover-left .right {   width: var(--other-width); } .hover-left .right:before {   z-index: 2; } .hover-right .right {   width: var(--hover-width); } .hover-right .left {   width: var(--other-width); } .hover-right .left:before {   z-index: 2; } @media(max-width: 800px) {   h1 {     font-size: 2rem;   }   .button {     width: 12rem;   } } @media(max-height: 700px) {   .button {     top: 70%;   } }      </style></head>  <body>   <div id="thing" class="container">   <div class="split left">     <h1>Seller</h1>     <a href="#" class="button">Read More</a>   </div>    <div class="split right">     <h1>Buyer</h1>     <a href="" class="button">Read More</a>   </div> </div> </body><script> const left = document.querySelector(".left"); const right = document.querySelector(".right"); const container = document.querySelector(".container"); left.addEventListener("mouseenter", () => {   container.classList.add("hover-left"); }); left.addEventListener("mouseleave", () => {   container.classList.remove("hover-left"); }); right.addEventListener("mouseenter", () => {   container.classList.add("hover-right"); }); right.addEventListener("mouseleave", () => {   container.classList.remove("hover-right"); }); </script></html>