hoverで縦にアコーディオンになった画像を表示させる画像ギャラリーに使えるテクニック CSS3 Accordion with Focus effect

WS002057
このエントリーをはてなブックマークに追加
PR

CSS3 Accordion with Focus effect
By frank

DEMO 表示

hoverを使った、画像ギャラリーに使えそうなアクションです
画像にマウスポインターを載せることで、画像が拡大されぼかしが消えるアクションです、ぼかしはCSSのフィルターを使っていません
画像を2つ用意してopacityを使ってぼかしの無い方の画像を表示・非表示をhoverのアクションにつけています、また変化をアニメーションにすることで、ぼかしが消えていくような演出になっています

CSSのフィルターを使っていないのでIEでも、この演出が使えますね

 

学んだポイント

画像を2枚用意して、片方はぼかしを与えたものにしてopacityを使うことでぼかしが消えるような演出が出来る

こういうテクニックは今回はじめて知りました、発想になかったです。ぜひ使ってみたいテクニックですね
ひとつWEBデザインの引出しが増えました!

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)