0

画像の高さ/幅を正しく表示するためのトランジションに問題があります。私のページを見れば、多くの説明は必要ないと思います：

画像遷移リンク

基本的に、サイズを2倍にして見やすくするために画像を拡大しようとしています。ただし、960 グリッド レイアウトで使用しているため、適切に表示されません。

これを試してみてください: チップ・キッドとデビッド・カーソンの画像をクリックしてください。

チップ キッドにカーソルを合わせるとそれほど悪くはありませんが、拡大すると、デビッド カーソンの画像の上ではなく後ろに表示されます。

デビッド・カーソンは右に画像がないので問題ないようです。ただし、左に成長する代わりに、960 グリッドの右と外側に成長します。

画像を拡大して見た目が美しく見えるようにするために使用できる修正は何ですか (つまり、他の画像の後ろに隠れてしまうことはありません。おそらく、David Carson 画像のようにマージンの外に出るのではなく、12 グリッド コンテナーのサイズ内にとどまります)。しますか？）

4

1 に答える 1

1

幅と高さを変更するだけでなく、 css 変換 (スケール)を使用してみてください。

編集：ホバールールをこれに変更してみてください（ブラウザのプレフィックスを追加する必要があります）。

.zinepages img:hover {
    position: relative;
    z-index: 100;
    -webkit-transform: scale(2);
    transition: all 2s;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

相対位置と z-index を追加して、常に他のものの上に位置するようにしました。より良い効果を得るために、ボックス シャドウも追加しました。保持するかどうかはあなた次第です。

編集 2 : また、グリッドをオーバーフローさせたくないことに気付きました。transform-origin でそれを行うことができます。左揃えと右揃えの画像にクラスを指定し、それぞれtransform-origin: left top;orを設定する必要transform-origin: right-top;があります。繰り返しになりますが、ここではベンダー プレフィックスを省略しました。

于 2013-06-02T02:49:10.727 に答える