2018年06月11日(月)
CSSだけでLightbox風に画像ポップアップ
Result
See the Pen CSS Lightbox by kachibito (@kachibito) on CodePen.
アニメーションエフェクトの不要なら結構シンプルなコードになりますcss
.row figure {/*表示されている画像。*/ height: 240px; width: 240px; margin: 0; background-size: cover; background-position: 50% 50%; transition: all 1s ease-in-out; background-repeat: no-repeat; z-index: 2; display: inline-block; position: relative; } .row a {/*拡大画像を表示させる為の要素*/ display: inline-block; text-align: center; margin: 40px; text-decoration: none; color: white; } .row a p {/*テキスト表示。デフォルトでは透過しておく*/ ...
0
8
16
43author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
[ユーザー投稿] 広告担当者（or になりたい人）のための「Webマーケティング必須知識」
NEXT ›
[ユーザー投稿] 【9/6無料セミナー】BtoB企業の戦略的ウェブサイト活用セミナー（名古屋） ウェブマーケティング活動に組織全体を巻き込む！
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSだけでLightbox風に画像ポップアップ』についてまとめています。
この記事は特にアニメーション・jQuery・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
