Hovering a link makes image slide out from nav bar with css3? - css

Question

JSFiddle of my failed attempt
The idea is i have a nav bar, below it a footer. The links in the navbar have a featured image with them. When you hover the link, the image slides out from the nav bar.
This should be done CSS only.
HTML
<nav class="navigation">navbar
<div class="singleelement">
<div class="container">
<div class="title">
Some Title1
</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">
Some Title2
</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
<footer>somefooter text </footer>
CSS
.titlepicture{
background-color: green;
width: 300px;
height: 100px;
}
.title{
background-color: rgba(255, 235, 145, 0.60);
}
.container{
position: absolute;
-webkit-transition-property: all;
-ms-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1.4s;
-ms-transition-duration: 1.4s;
transition-duration: 1.4s;
}
.container:hover{
top: -100px;
}
.singleelement{
display: inline-block;
position: relative;
}
nav {
margin-top: 150px;
background: aliceblue;
}

Answer 1

Try something like this codepen. I've absolutely positioned the images and used css transforms to place them off-canvas, and transitions to bring them back in on hover. Something like this:
nav {
width: 100%;
height: 60px;
background: green;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
nav .singleelement {
width: 50%;
height: 60px;
float: left;
text-align: center;
position: relative;
}
nav .singleelement .titlepicture {
width: 100%;
height: 200px;
background: red;
z-index: -2;
position: absolute;
top: 0;
left: 0;
transform: translate3d(0, -200px, 0);
transition: transform 0.25s ease;
}
nav .singleelement:hover .titlepicture {
transform: translate3d(0, 60px, 0);
}