Positioning image partly off of the bottom of the page - html

Question

I have an image I'm including in my page's footer. It is a small logo (using a placeholder iamge now). I'd like it to be halfway off of the bottom of the page so when you hover your mouse it peeks its head up all cute like. But I'm unable to style it to have it half off the bottom of the page, instead the full image is always visible, and all of the other contents on the webpage appear to be moving up and down when I hover instead. Hard to make out but this is what it looks like to go from having the mouse hovered, to not hovered:
1
2
Right now the styling on it is only:
position: relative; top:75px; left:2%

Answer 1

Is this what you need?
body{
padding: 0;
margin: 0;
}
.content{
width: 100vw;
max-width: 100%;
background: #4527a0;
height: auto;
position: relative;
text-align: center;
}
.inner_content{
max-width: 960px;
text-align: left;
display: inline-block;
height: auto;
color: white;
line-height: 16px;
}
.imagecontent{
position: absolute;
display: block;
z-index: 100;
margin: 0;
padding: 0;
left: 1%;
bottom:0%;
width:120px;
height: 170px;
background: #cddc39;
transform:translateY(85px);
transition:all 380ms;
margin-top: -170px;
}
.imagecontent:hover{
transform:translateY(0px);
}
footer{
width: 100%;
display: inline-block;
vertical-align: top;
background-color: #afb42b;
height: 200px;
position:relative;
overflow: hidden;
}
<div class="content">
<div class="inner_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nulla magna, ullamcorper eu metus quis, consequat facilisis nisi. Nullam rhoncus purus sed orci fermentum, et dictum dui consectetur. Duis imperdiet ultricies scelerisque. Aliquam erat volutpat. Praesent congue ex vel pulvinar porta. Fusce rutrum ut odio vitae placerat. Fusce lobortis nec tortor et egestas. Phasellus lorem ligula, finibus ut est eget, interdum interdum ipsum. Vestibulum sed facilisis ipsum, sed lacinia neque.
Suspendisse aliquam magna mauris, in tempus leo consequat in. Morbi blandit turpis nec enim vulputate elementum. Cras magna libero, sodales vitae odio quis, pretium tempus quam. Quisque at purus sed felis viverra scelerisque et sollicitudin turpis. Sed vitae arcu eu massa efficitur blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sed erat faucibus, lacinia tortor quis, rhoncus odio. Proin laoreet justo ac magna blandit, id sollicitudin orci pellentesque. Curabitur ac augue eu nulla lobortis tincidunt. Praesent sed sollicitudin orci. In feugiat, ligula posuere commodo maximus, orci nibh elementum ante, ullamcorper consequat diam justo et risus. Aliquam vitae ultrices leo, sed ultrices enim. Morbi quis aliquam est. Morbi in arcu nisl. Curabitur volutpat aliquam eros a tristique.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam nec ex arcu. Donec sit amet sodales dolor, vitae porttitor nibh. Phasellus mauris tellus, bibendum non scelerisque et, ultrices sed nunc. Morbi tempor neque a massa feugiat, non tristique urna feugiat. Sed at metus hendrerit, feugiat augue eu, pretium urna. Suspendisse ut luctus ex. Aliquam dapibus nisl quis mi porta cursus. Nam placerat lacus in eros auctor pharetra. Phasellus at pulvinar eros, viverra ullamcorper erat. Nullam ac quam erat. Vivamus neque dolor, pulvinar sed lacus id, bibendum varius mauris. Donec ornare dolor sagittis, lobortis erat in, ullamcorper sapien. Nam pellentesque consequat ante eu sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam elit metus, dictum quis lectus et, hendrerit hendrerit felis.
Aliquam congue tortor quis enim porttitor, venenatis condimentum enim faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum eget facilisis ipsum, ut imperdiet metus. Praesent ornare lacinia eros, ut semper eros porttitor nec. Aenean condimentum egestas nisi ac placerat. Integer vulputate ultrices egestas. Donec maximus quam arcu, sed lobortis tellus consectetur id. Mauris accumsan libero eu diam interdum condimentum. Mauris cursus ligula in rutrum vestibulum. Donec sed varius eros, ut convallis dolor. Sed arcu sem, iaculis eleifend nunc sed, tincidunt hendrerit elit. Nullam sed imperdiet arcu. Nunc enim ante, pretium non eros id, porttitor vulputate sem. Nullam nec scelerisque sapien, id congue sapien. Ut pulvinar ac felis vitae lobortis. Aenean bibendum vulputate aliquam.
<footer>
<div class="imagecontent"> </div>
</footer>
</div>
</div>