CODEWITHSUNDEEP
htmlcss
o97
o97

Reputation: 21

How to animate width size on hover/click in CSS?

I am relatively new, so please forgive me if I frame this wrong.

So, I've designed a webpage which is split horizontally into two equal sections; left (50% width) and right (50% width)

The idea I had was to make it so if someone hovers over either the left or the right section, said section will then expand to fill the page. (the left side expanding from left to right and the right side expanding from right to left)

I was able to get the left side working (only when clicked for some reason?), but whenever I try the right side it expands off right side of the page.

.home-page {
    width: 50%;
    height: 100vh;
    background-color: black;
    display: -webkit-box;
    display: flex;
    -webkit-align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: width 1s;

}

.home-page:hover{
    width: 100%;
}

.home-page-right {
    width: 50%;
    height: 100vh;
    background-color: black;
    display: -webkit-box;
    display: flex;
    -webkit-align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    float: left;
    transition: ease-in 1s;

}

.home-page-right:hover {
    width: 100%;
}
<body>

    <div class="header">
        <div class="header-container">
            <img src="/Images/GucciWhite.png" alt="gucciLogo" width="225px" height="auto">
            <p> COLLECTIONS </p>
        </div>
    </div>


    <div class="home-page" id="women-section" >

        <div class="html-component women" >
            <div class="title" id="women">WOMEN'S</div>
            <div class="sub-title">Discover this week the latest pieces from our latest collection<br>Fall Winter 2020
                Woman<br>Selected pieces with new pictures curated for you</div>
            <div class="button">VIEW</div>
        </div>

        <video autoplay muted loop id="gucciVideo">
            <source src="/videos/gucci2.mp4" type="video/mp4"></video>

    </div>

    <div class="home-page-right" id="men-section">

        <div class="html-component men">
            <div class="title"> MEN'S</div>
            <div class="sub-title">Discover this week the latest pieces from our latest collection<br>Fall Winter 2020
                Man<br>Selected pieces with new pictures curated for you</div>
            <div class="button"> VIEW</div>
        </div>

        <video autoplay muted loop id="gucciVideo">
            <source src="/videos/gucci1.mp4" type="video/mp4"></video>

    </div>

</body>

I have a feeling its due to my messy code lol.

Thank you.

Upvotes: 0

Views: 2422

Answers (2)

Gershom Maes
Gershom Maes

Reputation: 8178

I'd personally recommend absolute positioning, and using left: 0; to make the left element anchored to the left side of the page, and right: 0; to make the right element anchored to the right side:

.split {
  position: absolute;
  width: 100%; height: 80%;
  left: 0; top: 20%;
}
.split > .half {
  position: absolute;
  width: 50%; height: 100%;
  top: 0;
  z-index: 0;
  transition: width 1000ms ease-in-out;
}
.split > .half:hover {
  width: 100%;
  z-index: 1;
}
.split > .left {
  left: 0;
  background-color: #ff8000;
}
.split > .right {
  right: 0;
  background-color: #80ff00;
}
<div class="split">
  <div class="half left"></div>
  <div class="half right"></div>
</div>

You may notice that the two elements fight to be on top. The given css causes the hovered element to have a superior z-index, but of course this is discarded when the element is un-hovered (which means that the z-index can be lost before the element has transitioned back to occupying only half the screen).

Unfortunately only one element can be on top, and this is an intractable problem. Javascript can at least help us somewhat by maintaining the z-index until the other element is hovered:

window.addEventListener('load', () => {
  
  for (let split of document.getElementsByClassName('split')) {
    let left = split.querySelector('.half.left');
    let right = split.querySelector('.half.right');
    
    let hovered = left;
    left.addEventListener('mouseover', () => {
      hovered.style.zIndex = '';
      (hovered = left).style.zIndex = '2';
    });
    
    right.addEventListener('mouseover', () => {
      hovered.style.zIndex = '';
      (hovered = right).style.zIndex = '2';
    });
    
  }
  
});
.split {
  position: absolute;
  width: 100%; height: 80%;
  left: 0; top: 20%;
}
.split > .half {
  position: absolute;
  width: 50%; height: 100%;
  top: 0;
  z-index: 0;
  transition: width 1000ms ease-in-out;
}
.split > .half:hover {
  width: 100%;
  z-index: 1;
}
.split > .left {
  left: 0;
  background-color: #ff8000;
}
.split > .right {
  right: 0;
  background-color: #80ff00;
}
<div class="split">
  <div class="half left"></div>
  <div class="half right"></div>
</div>

A different, more correct solution

Here is a different way of achieving a very similar effect, with the added bonus that the two "halves" will never fight for the superior z-index. The idea is to make the parent element (which contains the two halves) be 200% of the screen size, and then to make each "half" be 50% of their parent's size - this means each half is exactly 100% of the overall screen size. Now instead of resizing each "half", we instead translate the parent element left/right depending on which "half" was hovered.

window.addEventListener('load', () => {
  
  for (let split of document.getElementsByClassName('split')) {
    let left = split.querySelector('.half.left');
    let right = split.querySelector('.half.right');
    
    left.addEventListener('mouseenter', () => split.classList.add('focus-left'));
    left.addEventListener('mouseleave', () => split.classList.remove('focus-left'));
    right.addEventListener('mouseenter', () => split.classList.add('focus-right'));
    right.addEventListener('mouseleave', () => split.classList.remove('focus-right'));
  }

});
body { overflow: hidden; }
.split {
  position: absolute;
  width: 200%; height: 80%;
  left: -50%; top: 20%;
  color: #ffffff;
  font-size: 120%;
  transition: left 1000ms ease-in-out;
}
.split.focus-left { left: 0; }
.split.focus-right { left: -100%; }
.split > .half {
  position: absolute;
  width: 50%; height: 100%;
  top: 0;
  overflow: hidden;
}
.split > .half.left { left: 0; background-color: #ff8000; }
.split > .half.right { left: 50%; background-color: #ff0080; }
<div class="split">
  <div class="half left">
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
  </div>
  <div class="half right">
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
  </div>
</div>

Upvotes: 1

EZbrute
EZbrute

Reputation: 428

Fixed up your classes just a little bit. 

.home-page {
    position: relative;
    width: 100%;
    height: 100vh;
}

.home-page-left, .home-page-right {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: black;
    display: -webkit-box;
    display: flex;
    -webkit-align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 1s;
}

.home-page-left {
    left: 0;
    right: 50%;
}

.home-page-left:hover {
    right: 0;
}
.home-page-left:hover ~ .home-page-right {
    left: 100%;
}

.home-page-right {
    left: 50%;
    right: 0;
}

.home-page-right:hover {
    left: 0;
}

<body>
    <div class="header">
        <div class="header-container">
            <img src="/Images/GucciWhite.png" alt="gucciLogo" width="225px" height="auto">
            <p> COLLECTIONS </p>
        </div>
    </div>

    <div class="home-page">
        <div class="home-page-left" id="women-section">
            <div class="html-component women" >
                <div class="title" id="women">WOMEN'S</div>
                <div class="sub-title">
                    Discover this week the latest pieces from our latest collection<br>
                    Fall Winter 2020 Woman<br>
                    Selected pieces with new pictures curated for you
                </div>
                <div class="button">VIEW</div>
            </div>

            <video autoplay muted loop id="gucciVideo">
                <source src="/videos/gucci2.mp4" type="video/mp4">
            </video>
        </div>

        <div class="home-page-right" id="men-section">
            <div class="html-component men">
                <div class="title">MEN'S</div>
                <div class="sub-title">
                    Discover this week the latest pieces from our latest collection<br>
                    Fall Winter 2020 Man<br>
                    Selected pieces with new pictures curated for you
                </div>
                <div class="button"> VIEW</div>
            </div>

            <video autoplay muted loop id="gucciVideo">
                <source src="/videos/gucci1.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</body>

Upvotes: 0

Related Questions