http://designshack.net/articles/css/build-an-animated-photo-wall-with-css/を使用 して、Rails アプリにフォト ウォールを実装しようとしています。次のように、画像の高さと幅の変更のみを custom.css.scss に加えて、リスト、段落、および画像の CSS をプラグインしました。
/* picture wall */
/*------CONTAINER------*/
.container {
width: 320px;
margin: 0 auto 50px auto;
}
/*------LIST------*/
.container ul {
list-style-type: none;
}
.container li {
float: left;
position: relative;
width: 280px;
height: 187px;
overflow: hidden;
}
.container li:hover {
cursor: pointer;
}
/*------PARAGRAPH------*/
.container li p {
color: transparent;
background: transparent;
font: 200 10px/80px 'Arvo', Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 80px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container li:hover p {
color: white;
background: #000; /*fallback for old browsers*/
background: rgba(0,0,0,0.7);
}
/*------IMAGES------*/
.container img {
width: 80px;
height: 80px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.container li:hover img {
width: 100px;
height: 100px;
}
アセット パイプラインは、そのファイルで次のエラーをスローします。
Invalid CSS after " position:": expected pseudoclass or pseudoelement, was " absolute;"
位置行をコメントアウトすると、ファイルの次の行が表示されます。
Invalid CSS after " top:": expected pseudoclass or pseudoelement, was " 0;"
構文の問題？有効なcssをscssファイルに単純に入れることはできませんか? 何を与える？