0

我正在做一个网站项目，我想要这个很酷的悬停效果，但我似乎无法让它正常工作？

我有一个黑胶唱片盒图像，该图像向左滑动，带有标题（溢出：隐藏）以显示其后面的唱片图像。同时从左边我想要一个记录的描述从向左移动的vinly记录盒后面滑出，并在记录图像的顶部，有点不透明，所以你仍然可以看到记录（这部分简单）

这是html代码：

<div id="stations">
<div class="grid_3">
<div class="records"><!-- sleeve -->
<h3>Groove Salad</h3>
<div class="recordsinfo">Station description.</div>
</div>
</div>
</div>

这是CSS代码：

#stations>div {
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFMrecord.png);
background-repeat:no-repeat;
height: 220px;
margin-bottom: 20px;
position: relative;
overflow:hidden;
}

#stations>div>.records{
background-image: url(http://benlevywebdesign.com/somafm/images/SomaFM.png);
background-repeat:no-repeat;
height: 220px;
margin-bottom: 20px;
overflow:hidden;
position:relative;
}

#stations>div>.records>h3 {
color: #FFF;
background-color: rgba(255,255,255, 0.45);
width:200px;
margin-top:0px;
margin-bottom:-5px;
padding: 10px 10px 3px;
}

#stations>div>.records>.recordsinfo{
position: absolute;
left:-150px;
bottom: 0;
margin: 5px 10px;
}

@-moz-keyframes slideout {
    0% { left:0; }
    100% { left:-100px; }
}
@-webkit-keyframes slideout {
    0% { left:0; }
    100% { left:-100px; }
}
@keyframes slideout {
    0% { left:0; }
    100% { left:-100px; }
}


#stations>div>.records:hover{
height: 220px;
width:220%;
margin-bottom: 20px;
left:-100px;
overflow:hidden;
position: relative;
-moz-animation: slideout 0.75s 1;
-webkit-animation: slideout 0.75s 1;
animation: slideout 0.75s 1;
}

#stations>div>.records>.recordsinfo:hover{
height: 220px;
width:220%;
left:150px;
overflow:hidden;
position: relative;
-moz-animation: slidein 0.75s 1;
-webkit-animation: slidein 0.75s 1;
animation: slidein 0.75s 1;
}

这是它的一个小提琴，直到最后一部分是描述不起作用并滑出左边！

更新了小提琴 http://jsfiddle.net/Xc9U6/11/

4

3 回答 3

1

试试这个 -演示

HTML

<div id="stations">
    <div class="grid_3">
        <div class="records"><!-- sleeve -->
            <h3>Groove Salad</h3>
        </div>
        <div class="recordsinfo">Station description.</div>
    </div>
</div>

CSS

#stations > div {
    background-image: url(http://benlevywebdesign.com/somafm/images/SomaFMrecord.png);
    background-repeat:no-repeat;
    height: 220px;
    margin-bottom: 20px;
    position: relative;
    overflow:hidden;
}

#stations > div:hover .records {
    margin-left: -110px;
}

#stations .records{
    background-image: url(http://benlevywebdesign.com/somafm/images/SomaFM.png);
    background-repeat:no-repeat;
    height: 220px;
    margin: 0 0 20px 0;
    overflow:hidden;
    position:relative;

    -webkit-transition: all .75s;
       -moz-transition: all .75s;
            transition: all .75s;
}

#stations h3 {
    color: #FFF;
    background-color: rgba(255,255,255, 0.45);
    width:200px;
    margin-top:0px;
    margin-bottom:-5px;
    padding: 10px 10px 3px;
}

#stations > div:hover .recordsinfo {
    margin-left: 0;
}

#stations .recordsinfo {
    background: rgba(0, 0, 0, .8);
    color: #fff;
    position: absolute;
    width: 150px;
    bottom: 0;
    margin: 5px 10px 5px -150px;

    -webkit-transition: all .75s;
       -moz-transition: all .75s;
            transition: all .75s;
}
于 2012-10-03T16:21:20.973 回答
0

如果我理解得很好，您希望标题保留在原处吗？如果是这样，你去：

#stations > div > .records:hover h3 {
    margin-left: 100px;
}
于 2012-10-03T15:57:49.890 回答
0

最后！您在这里遇到了很多不同的问题，从将宽度设置为 220%，而不是 px，到尝试为动画的子项设置动画（因此它的位置已关闭），到未定义您想要使用的幻灯片动画。

试试这个：jsFiddle

于 2012-10-03T16:21:19.337 回答