ポラロイド写真をばらまく(不具合あり）

https://gyazo.com/40f1d1fd811c7bd2a65fe718f1e44164

ポラロイド写真調にフレームを付けるCSS。

画像の重なりを許して、ホバーアクションで前に出すようにした。

段階的な傾きエフェクトのCSS。

https://i.gyazo.com/d2437015464841fe58bdd6276ea289b3.png

[+/*** [https://gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7]]

正方形に近い画像でやるといい感じ。

◆ ポラロイド 調のフレーム

code:style.css

.line .deco-\+ img {

margin: 0 auto;

background: white; /* 背景色を白 */

padding: 10px 10px 30px; /*上 左右 下のパディング */

display: inline-block;

position: absolute;

width: 256px;

height: 286px;

object-fit: cover;

z-index: 500;

}

.line .deco-\+ img:hover {

z-index: 2000; /* 他の要素との重なりがあるなら調整する */

}

◆ 段階的な傾き

code:style.css

.line .deco-\/ img.image { /* イタリック指定は画像には関係ない */

display: inline-block;

transform: rotate(2.0deg);

}

.line strong.level-1 .deco-\/ img.image {transform: rotate(-2.0deg); }

.line strong.level-2 .deco-\/ img.image {transform: rotate( 4.0deg); }

.line strong.level-3 .deco-\/ img.image {transform: rotate(-4.0deg); }

.line strong.level-4 .deco-\/ img.image {transform: rotate( 7.0deg); }

.line strong.level-5 .deco-\/ img.image {transform: rotate(-7.0deg); }

.line strong.level-6 .deco-\/ img.image {transform: rotate(12.0deg); }

不具合

strong level で画像サイズを調整するCSSを使っていると、バッティングする。

自分は使ってなかったけど・・・

これはこれで便利な機能なので両立させたい。

どーしたらいいんだろ・・・・？？

code:style.css

.level-1 img.image { object-fit: cover; width: 16.7%; max-height: none; }

.level-2 img.image { object-fit: cover; width: 33.3%; max-height: none; }

.level-3 img.image { object-fit: cover; width: 50%; max-height: none; }

.level-4 img.image { object-fit: cover; width: 66.7%; max-height: none; }

.level-5 img.image { object-fit: cover; width: 83.3%; max-height: none; }

.level-6 img.image { object-fit: cover; width: 100%; max-height: none; }

AIに相談したら・・・

段階的な傾きにサイズ調整が介入しないよう　キャンセルを加えることを教えてもらった。

:not() とか使うのかと思ったけど・・・　これでいいのかイマイチ不安です。

code:style.css

.line strong.level-1 .deco-\/ img.image { transform: rotate(-2.0deg);

object-fit: initial;

width: auto;

max-height: auto; }

.line strong.level-2 .deco-\/ img.image { transform: rotate( 4.0deg);

object-fit: initial;

width: auto;

max-height: auto;}

.line strong.level-3 .deco-\/ img.image { transform: rotate(-4.0deg);

object-fit: initial;

width: auto;

max-height: auto;}

.line strong.level-4 .deco-\/ img.image { transform: rotate( 7.0deg);

object-fit: initial;

width: auto;

max-height: auto;}

.line strong.level-5 .deco-\/ img.image { transform: rotate(-7.0deg);

object-fit: initial;

width: auto;

max-height: auto;}

.line strong.level-6 .deco-\/ img.image { transform: rotate(12.0deg);

object-fit: initial;

width: auto;

max-height: auto; }

強引な感じもする・・・

UserCSS.icon