LINK Effect (caption)
画像リンク（キャプション表示２種類）
画像リンクにマウスをあてた時のエフェクトです。
２種類ご紹介します。コピペで出来るので、３０秒もかからずに終わります＾＾
下から
<style type="text/css">
.cc-imagewrapper{
position:relative;
overflow:hidden;
}
.cc-imagewrapper figcaption{
background:rgba(0,0,0,0.6);
color:#FFF;
text-align:center;
height:40px;
line-height:40px;
position:absolute;
bottom:-40px;
left:0;
-webkit-transition: .3s;
transition: .3s;
}
.cc-imagewrapper:hover figcaption{
bottom:0px;
}
</style>
上から
<style type="text/css">
.cc-imagewrapper{
position:relative;
overflow:hidden;
}
.cc-imagewrapper figcaption{
background:rgba(0,0,0,0.6);
color:#FFF;
text-align:center;
height:40px;
line-height:40px;
position:absolute;
top:-40px;
left:0;
-webkit-transition: .3s;
transition: .3s;
}
.cc-imagewrapper:hover figcaption{
top:0px;
}
</style>
Pursue what you can't do with Jimdo
Jimdo Laboratory
1-14-4 Nuahioi Shinagawa-ku,Tokyo