私はウェブサイトのプロジェクトを行っており、このクールなホバー効果が欲しいのですが、正しく動作しないようです?
タイトル (overflow:hidden) で左にスライドして、その背後にあるレコード イメージを表示するビニール レコード ケースのイメージがあります。同時に、左側からレコードの説明を、左側に移動しているビンリー レコード ケースの後ろからスライドさせて、レコードが見えるように少し不透明なレコード イメージの上に表示します (この部分)は簡単だ)
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/