Bottom popup blur effect and height change-CodePudding

I'm trying to recreate the popup from the bottom of this page: https://www.redsquareagency.com/

I'm having trouble with my version. The hover property only activates on the top part of my hidden div because there is an unordered list positioned on top of it. This list blocks the cursor from activating the hover effect.

Also, when the hidden div partially shows itself on hover, it pushes the whole page up. Is there a more elegant solution than changing the div height on hover so it would look more like the one from the reference website?

/* Wrapper to partially hide bottom popup */

#hidden {
  position: relative;
  height: 45px;
  overflow: hidden;
}

#popup {
  position: absolute;
  overflow: hidden;
  margin: 0 50px 0;
}

#popup img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 5px;
  filter: blur(3px);
}

#popup img:hover {
  filter: blur(0);
  transform: scale(1.1);
}

#hidden:hover {
  height: 70px;
}


/* Bottom pop-up box text links */

#popup nav ul {
  position: absolute;
  top: 0;
  width: 100%;
  margin-top: 5px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  font-size: 23px;
}

<div id="hidden">
  <div id="popup">
    <img src="https://via.placeholder.com/100" alt="popup box image" />
    <nav>
      <ul>
        <li>All Projects</li>
        <li>Work ></li>
      </ul>
    </nav>
  </div>
</div>

CodePudding user response：

You can change the properties of a child element by :hover or other action selectors on the parent element as in: #popup:hover img { ...

body,
html {
    margin: 0
}
.contents{
    line-height:2em;
}

/* Wrapper to partially hide bottom popup */

#hidden {
    position: relative;
    height: 100px;
    overflow: hidden;
}

#popup {
    position: absolute;
    bottom: 0;
    overflow: hidden;
    transform: translateY(30px);
    transition: transform .5s ease
}

#popup:hover {
    transform: translateY(10px)
}

#popup img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
    filter: blur(3px);
    transition: all .5s ease
}

#popup:hover img {
    filter: blur(0);
    transform: scale(1.1);
}


/* Bottom pop-up box text links */

#popup nav ul {
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: 5px;
    padding: 0;
    display: flex;
    justify-content: space-between;
    font-size: 23px;
}

<div >
contents<br />
contents<br />
contents<br />
contents<br />
contents Last Row<br />
</div>
<div id="hidden">
    <div id="popup">
        <img src="https://placekitten.com/g/600/100" alt="popup box image" />
        <nav>
            <ul>
                <li>All Projects</li>
                <li>Work ></li>
            </ul>
        </nav>
    </div>
</div>

CodePudding user response：

This is my solution, hope it can help you:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: #111111;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100%;
  color: #fff;
}

main {
  padding: 2rem;
}

footer {
  height: 20vh;
  padding: 15px 0 0;
  overflow: hidden;
}
footer .box {
  width: 80%;
  background: crimson;
  height: 500px;
  margin-inline: auto;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.135, 0.805, 0.305, 0.905);
}
footer .box img {
  width: 100%;
  filter: blur(10px);
}
footer a:hover .box {
  transform: translateY(-15px);
}
footer a:hover .box img {
  filter: blur(0);
}

<main>
</main>
<footer>
    <a href="">
        <div >
            <img src="https://images.prismic.io/red-square-site/7ee825e0906b2918e50a9f963c50198b5c26b27d_flip-thumb.jpg" alt="">
        </div>
    </a>
</footer>