'How do I make a div slide into viewport with info while maintaining responsiveness? (without jquery)

I've just started my journey into webdev not long ago, and trying to code my first project - a landing page.

https://imgur.com/a/4R8wqFm

I want to have a background image that spans the whole viewport (which I managed). And on top on that when the user hovers over right half of the screen, a div(? the white bit in the image) that covers the left side of the screen will go off the screen with the title, and a section will come in from the right side with some text (second image).

The way I've managed it so far is to have the background image, then a div on the right half of the viewport that's invisible, 2 divs skewed either side, and when user hovers over the first one, I'll move the other 2. But this isn't responsive at all, when I change the screensize it doesn't work as intended (text going off screen, the skewed divs don't cover the % of viewport I want it to etc)

I've not studied jquery yet, so if someone can help me with just html and css (and bootstrap), that'll be great! If jquery is absolutely necessary for stuff like this, I'll go read up on it.

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("https://images.unsplash.com/photo-1517824806704-9040b037703b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2FtcGluZ3xlbnwwfHwwfHw%3D");
    background-size: cover;
    background-position: center;
    text-shadow: 0 0.5rem 0.1rem rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}


.container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}

.titleText {
    float: left;
    position: absolute;
    left: 20vw;
    top: 60%;
    z-index: 1000;
    background-color: rgba(17, 17, 17, 0.5);
    padding: 5px;
    color: #c1c1c1;
    font-weight: bold;
}

.image {
    width: 100vw;
    height: 100vh;
    position: relative;
    float: center;
    object-fit: cover;
}

.hoverOver {
    float: left;
    position: absolute;
    bottom: 0;
    width: 70vw;
    height: 100%;
    left: 50vw;
    right: 120%;
    background-color: rgba(238, 238, 238, 1);
    z-index: 10;
    opacity: 0;
}

.overlay {
    float: left;
    position: absolute;
    bottom: 0;
    left: -50%;
    right: 100%;
    background-color: rgba(251, 251, 251, 0.5);
    overflow: hidden;
    width: 80%;
    height: 100%;
    transition: .5s ease;
    transform: skewX(25deg);
}

.hoverOver:hover~.overlay {
    width: 0%;
    left: -60%;
}

.overlay2 {
    float: left;
    position: absolute;
    bottom: 0;
    left: 100%;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    width: 150%;
    height: 100vh;
    transition: .5s ease;
    /* transform-origin: 0 0; */
    transform: skewX(25deg);
    opacity: 0;
}

.hoverOver:hover~.overlay2 {
    width: 150%;
    left: 40%;
    opacity: 0.9;
}


.text {
    color: white;
    font-size: 20px;
    position: relative;
    top: 30%;
    left: 10%;
}

#description {
    transform: skewX(-25deg);
    text-align: right;
    width: 40%;

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <link rel="stylesheet" href="/css/styles.css">

  <title>Atlantis Returns</title>
</head>

<body>
  <div class="container" id="titleSec">
    <div class="titleText">
      <h1>BOOK TITLE</h1>
      <h2>Author Name</h2>

      <p> Buy at:
        <a href="www.google.com">Amazon</a>
      </p>

    </div>

    <!-- <img src="/images/defaultImage.jpg" alt="Avatar" class="image"> -->
    <div class="hoverOver"></div>
    <div class="overlay">
    </div>
    <div class="overlay2">
      <div class="text" id="description">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur assumenda doloribus magni? Amet asperiores quod inventore voluptatum velit, ad accusantium earum perspiciatis, in, suscipit sint. Vel vitae eos ab aliquid.
        </p>
      </div>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>
htmlcsscss-animations


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions