画像に説明文をふわっと出す
なんとなくテストで作って見ました。
CSS3のみでやってますが、
JavaScriptでやることも可能です。
一応CSSでやったほうが重くないという話です。
[css title=”CSS”]
.image-data
{
position:relative;
width:300px;
height:300px;
display:inline-block;
overflow:hidden;
}
.image-data > .image-info
{
position:absolute;
bottom:-75px;
left:0;
width:100%;
height:75px;
opacity:0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #000000), color-stop(0.00, transparent));
background: -webkit-linear-gradient(top, transparent 0%, #000000 100%);
background: -moz-linear-gradient(top, transparent 0%, #000000 100%);
background: -o-linear-gradient(top, transparent 0%, #000000 100%);
background: -ms-linear-gradient(top, transparent 0%, #000000 100%);
background: linear-gradient(top, transparent 0%, #000000 100%);
transition:bottom 0.1s linear,opacity 0.2s ease-in;
-webkit-transition:bottom 0.1s linear,opacity 0.2s ease-in;
}
.image-data:hover > .image-info
{
bottom:0;
opacity:1;
}
.image-data .image-title
{
color:#fff;
font-weight:bold;
margin:12px 0 0 12px;
}
.image-data .image-description
{
color:#fff;
font-size:small;
margin:12px 0 0 12px;
}
[/css]
[html title=”HTML”]
<div class="image-data">
<div class="image-source"><a href="#" class="thumb"><img src="001.png" width="300" height="300"></a></div>
<div class="image-info">
<div class="image-title">サムネイル</div>
<div class="image-description">CSS3のテスト用</div>
</div>
</div>
[/html]
コレしかやってないですが、一応それっぽく見えます。
もうちょっと見栄えよくして、jQueryのプラグインにしたいなあと思ってますが、とりあえずメモってことで。
動作見たい方はこちら。
