画像に半透明の黒い帯を入れて、そこに説明文を入れる方法を紹介します。
CSSコードはご自由にお持ち帰りください。
今回作るのはコチラ
謎の犬
撮影場所：北海道小樽市
こんな風に、画像の中に説明文を埋め込んでみましょう。
HTML部分
<div class="
cap">
<img src="画像のURL" />
<p>
ここにキャプションを入力</p>
</div>
CSS部分
.cap {
position: relative;
}
.cap p {
width: 300px; /*画像の横幅-20px*/
position: absolute;
padding: 8px 10px;
bottom: 8px;
color: #fff;
background: #000;
opacity:0.7;
filter: Alpha(opacity=70);
}
これだけです。ただ画像の大きさによってwidthを変えなきゃいけないので、画像のサイズが固定されているサムネイル等に利用するのがベストかと。
マウスオーバー時にアニメーションさせる
こんな感じで、マウスオーバー時のエフェクトを追加しても面白いです。キャプション部分にマウスを乗せてみてください。
謎の犬
撮影場所：北海道小樽市
CSS部分
.cap p {
width: 300px; /*画像の横幅-20px*/
position: absolute;
padding: 8px 10px;
bottom: 8px;
color: #fff;
background: #000;
filter: Alpha(opacity=70);
opacity:0.7;
-moz-transition-duration:0.2s;
-webkit-transition-duration:0.2s;
-o-transition-duration:0.2s;
ms-transition-duration:0.2s;
transition-duration:0.2s;
}
.cap p:hover {
color: #e47; /*文字色の変更*/
filter: Alpha(opacity=90); /*透明度の変更*/
opacity:0.9; /*透明度の変更*/
}
ね、簡単でしょ？
当ブログのサイドバーのAmazonリンクは、上記のコードとリンクタグを組み合わせて作っています。コピペするだけでもそれなりに動くと思うんで、参考にどうぞ。
関連するかもしれない記事
