css - 悬停链接会使图像从带有 css3 的导航栏中滑出？

Question

JSFiddle of my failed attempt

我的想法是我有一个导航栏，在它下面是一个页脚。导航栏中的链接带有特色图片。当您将鼠标悬停在链接上时，图像会从导航栏中滑出。这应该仅通过 CSS 完成。

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

尝试这样的事情 codepen .我已经绝对定位图像并使用 css 转换将它们放置在 Canvas 外，并使用过渡将它们带回悬停状态。像这样:

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);
}