Learning to Code Learning to Code - 6 days ago 4
CSS Question

How to scroll up a div when hovering over another element

I have an absolute div that is behind my footer. When I hover over another element (#snapchat) I want that absolute div to scroll up from behind the footer and stop above it where it can be seen. How would I do this?



.snapcode-footer {
position: absolute;
padding-top: 20px;
text-align: center;
left: 0;
right: 0;
}

.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}

.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}

<div class="snapcode-footer">
<img src="https://hullandspar.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>

<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><a href="https://www.twitter.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter @hullandspar"/></a></li>
<li id="snapchat"><a href="#"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat @hullandspar"/></a></li>
<li id="insta"><a href="https://www.instagram.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram @hullandspar"/></a></li>
<li id="facebook"><a href="https://www.facebook.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook @hullandspar"/></a></li>
</ul>
</div>

<div class="sub-footer">
<div class="container">
<div class="row">

<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.hullandspar.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarerâ„¢"/>
<div/>
</div>

</div>




Answer

I'm re-positioned your div.snapcode footer and applied a css property to

#snapchat:hover ~ .snapcode-footer . hopes this will help you :)

.snapcode-footer { 
  position: absolute;
  padding-top: 90px;
  text-align: center;
  left: 0;
  right: 0;
}

.sub-sub-footer {
  position: relative;
  z-index: 1;
  background-color: #F7F7F7;
  padding-top: 35px;
  padding-bottom: 20px;
}

.sub-footer {
  position: relative;
  z-index: 1;
  background-color: #edeeef;
  margin-top: 0px;
}

#snapchat:hover ~ .snapcode-footer{
  z-index:999;
  color:green;
  position:relative;
  margin-bottom:100px;
  margin-left:50px;
  }
  
<div class="sub-sub-footer">
 <ul class="social-footer">
    <li id="twitter"><a href="https://www.twitter.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter @hullandspar"/></a></li>
    <li id="snapchat"><a href="#"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat @hullandspar"/></a></li>
   <div class="snapcode-footer">
<img src="https://hullandspar.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
    <li id="insta"><a href="https://www.instagram.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram @hullandspar"/></a></li>
    <li id="facebook"><a href="https://www.facebook.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook @hullandspar"/></a></li>
 </ul>
</div>

    <div class="sub-footer">
        <div class="container">
            <div class="row">

                <div class="col-md-5-footer">
        <div class="footer-img">    
            <img src="https://www.hullandspar.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarerâ„¢"/>
        </div>  
                </div>

            </div>