透明な枠線を使用してCSSのみの画像表示効果を作成する
A CSSのみの画像は効果を明らかにする さまざまな方法で解決することができます。実際にデザインをコーディングするのはとても簡単です。 画像が目立つ （によってオーバーフロー） その無地の背景 -あなただけ 画像を配置する 無地の背景を持つ小さな要素上.
使用しても同じ結果が得られます。 透明な境界線, あなたが保つ場所 背景要素のサイズは同じ 前景のそれと同様に透明な境界線を追加する 空のスペースを作る 前景がオーバーフローする.
がある 後者の方法を使用する利点. 前景がオーバーフローする領域を提供するのは透明な境界線なので、 オーバーフローの方向を制御する 左、右、上、下の境界線の間。また、前景と背景の両方のサイズが同じである 両方の要素を同時に動かすのが簡単になります ページ全体.
一言で言えば、我々は方法を見るつもりです CSSのみの画像を作成する を使って 小さな無地の背景 とともに 透明な境界線を持つ前景画像. あなたはチェックアウトすることができます 最終デモ 以下.
1.初期コードを作成する
HTMLに関して, 唯一 CSSでは、 2つのCSS変数, 私達はまた追加します 我々 空を追加 の に画像を追加します。 の に 下のスクリーンショット あなたは私たちがこれまでに持っているものを見ることができます（ を追加する 画像の後ろの小さい（スライドアウト）背景, 他の擬似要素を使用します, 別のCSS変数を作成します, の 幅 として計算されます の 高さ として計算されます とともに のCSSフィルタ これが デモのスクリーンショット これまでにレンダリングされた 我々 を追加 私達として 追加済み 下に、あなたは見ることができます 最終デモ. 表示した場合
--BGC そして --薄暗い のために 背景色 そしてその 寸法 の .フー それぞれコンテナ。この例では、 同値 幅と高さが四角形のボックスになるように作成する 別々の変数 長方形が必要な場合は高さと幅.位置：相対 支配する .フー, その擬似要素は、私たちが使うつもりなので 画像を明らかにする, することができます 絶対位置 （下記参照） 積み重ねる. .foo --bgc：＃FFCC03; - dim：300px。幅：var（ - dim）;高さ：var（ - dim）;背景色：var（ - bgc）;位置：相対;
コンテンツ 財産 両方の疑似要素に, .foo :: before そして .foo :: after, 正しくレンダリングする. .foo :: before、。foo :: after content： "; position：absolute; left：0; top：0;
.フー 要素、その2つの疑似要素, .foo :: before, .foo :: after, そして彼らの ホバー 疑似クラス 入手する 遷移 財産 それは イージーイントランジションを追加する 500ミリ秒（0.5秒）の間彼らに. .foo、.foo：hover、.foo :: before、.foo :: after、.foo：hover :: before、.foo：hover :: after transition：トランスフォーム500msイージーイン。
2.画像を追加する
.foo :: before 疑似要素 背景画像として, そして 疑似要素全体をカバーするようにサイズを設定します とともに 幅 そして 高さ プロパティ我々 真下に積み重ねる .フー 素子 を使用して zインデックス：-1 ルール. .foo :: before width：100％;身長：100％。背景：url（camel.png）センター／表紙。 zインデックス：-1。
センター キーワード 画像を中央揃え, しながら カバー キーワードは画像を 要素全体をカバー 縦横比を維持しながら. Zインデックス から削除されます .foo :: before 見られるように）：
3.スライドアウトの背景を追加する
.foo :: after.--b, のために ボーダー幅. 私達は与える 3つの透明な境界線 に ::後 疑似要素： 上、右、下. .foo :: after --b：20px;幅：calc（100％ - var（ - b））;身長：calc（100％ - calc（var（ - b）* 2））;ボーダー：var（ - b）単色透明。左ボーダー：なし。 box-shadow：インセット0 var（ - dim）0 var（ - bgc）;フィルター：明るさ（0.8）。 ｚ指数：−２。
計算値（100％ - var - b）） それは戻ります の全幅 .フー 水平方向の境界線の合計幅 （左ボーダーがないので右ボーダーのみ）.calc（100％ - calc（var（ - b）* 2）） それは戻ります の全高 .フー 垂直方向の境界線の合計幅 （上下の枠線）.ボックスシャドウ 財産、私たちも 水平インセットシャドウを追加する と同じサイズの .フー （これは var（ - dim））.明るさ（.8） 背景色を暗くする 少し、そして最後に、 zインデックス：-2 ルール を配置します ::後 下の疑似要素 ：：前 それは画像を含みます.Zインデックス 見ることができるように両方の擬似要素から削除されています。
4.変換を追加する
変形する 財産 2つの疑似要素に .フー, 両方の擬似要素は 水平に移動.遷移 すべての要素に対するプロパティ ステップ1の終わりに、画像とその背景の動きは 両方ともアニメ. .foo：hover :: before、.foo：hover :: after transform：translateX（100％）;
ボーナス：オプションのマージン
.フー 他の要素の隣に ページ上でこれらの他の要素が 立ち去る 画像とその背景がスライドすると、 と同じ幅の右マージンを追加します。 .フー に .foo：ホバー 素子. .foo：hover マージン右：var（ - dim）;
