タグ :

Lightboxの進む戻る矢印を画像枠の外に出すカスタマイズ

投稿日 : 2015年3月24日 | 更新日 : 2015年03月24日 前のページへ戻る

Pocket

Lightboxの進む、戻る矢印を画像の外へ出すカスタマイズのメモ。

Lightbox

Untitled (1)

lightbox.cssを変更

.lb-nav a.lb-prev {
  .....
  position: absolute;  // 追加
  left: -80px;         // 0から-80pxへ変更
  .....
} 

lb-nav a.lb-next {
  .....
  position: absolute;  // 追加 
  right: -80px;        // 0から-80pxへ変更
  .....  
}

進む、戻る矢印はデフォルトではマウスオーバーした際に表示される。
マウスオーバーしなくても表示させるには下記のように変更する。

.lb-nav a.lb-prev {
  .....  
  opacity: 1;         // 0から1へ変更 
  ..... 
}

.lb-nav a.lb-next {
  .....  
  opacity: 1;         // 0から1へ変更 
  ..... 
}

CSS,Programming | 固定リンク | Comments (0)

このページの上へ移動

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 

 

 


このページの上へ