リンクしている画像に影を付ける

CSS

実物

画像に影を付け、なおかつ、カーソルover時にフレームの色を変更するようにしてみた。
神流湖バス通信の死魚祭@2007の「内容」にある写真2枚で試して頂きたい。

解説

まず、アップロードした画像に影をつけるにはを行う。

今回、当サイト向けに変更した内容を紹介。

html



<p class="photo">

 <a href="../image/2007/0103aL.jpg" rel="lightbox">

  <img src="../image/2007/0103a.jpg" alt="死魚祭豪華賞品。" width="192" height="144"/>

 </a>

</p>
Lightbox Plusでリンクしている画像(0103a.jpg)をp要素でマークアップする。p要素はphotoクラスとした。

css



p.photo 

 {

 float: right;

 background: url(../image/shadowAlpha.png) no-repeat bottom right !important;

 background: url(../image/shadow.gif) no-repeat bottom right;

 margin: 10px 5px 10px 15px !important;

 margin: 10px 5px 10px 10px;

 }
p.photo img

 {

 display: block;

 position: relative;

 background-color: #fff;

 border: 1px solid #a9a9a9;

 margin: -5px 5px 5px -5px;

 padding: 5px;

 }

nlog(n)さんところを参考にCSSを記載。

cssカーソルover分



p.photo a:hover,

p.photo a:active

 {

 background-color: #fcc;

 }
p.photo a:hover img,

p.photo a:active img

 {

 background-color: #fcc;

 border: 1px solid #ffa9a9;

 }
p要素およびimg要素両方に背景色を指定すると、写真のフレームの部分の色が変更されます。

手こずった点は、img要素のみの宣言だとIE6では不完全となりました。
p要素も宣言する事でIE6でも大丈夫でした。

あと、doctype宣言で互換モードの場合は試しておりません。

特に問題が出なければこのまま使おうと思います。