1

ホバー時に画像を拡大する (ズーム効果のように) ための素晴らしいチュートリアルを見つけました。私のニーズとチュートリアルの主な違いは、すべての画像をコンテナのような単一のボックスに収めたいということです。そのため、チュートリアルを実装したときに、ホバーすると拡大画像の一部が切り取られることに気付きました。効果はコンテナに制限されます。ズームがページ上で必要な場所に移動する方法が欲しいです。（ズームされた画像全体を見ることができます）これが私のチュートリアルの実装です：http://mulnix.contestari.com/wp/example225/1.php

JSFiddle: http://jsfiddle.net/dsRAH/ Original Code

4

4 に答える 4

2

オーバーフローを削除し
ます: 画像コンテナー DIV の削除float:left;と追加以外の非表示およびその他すべてのオーバーフローdisplay:inline-block;

* {
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  background: #000;
  color: #fff;
  z-index: 0;
}

.photos {
  position: relative;
  display: flex;
  flex-flow: row wrap;
}

.photo {
  box-shadow: 0 0 0 2px  #444;
  margin: 5px;
  position: relative;
  max-height: 200px;
  transform: translateZ(0);
  transition: transform 0.5s;
}

.photo:hover {
  z-index: 1;
  transform: translateZ(0) scale(1.6);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-legend {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1em;
  background: rgba(0,0,0,0.3);
}
<div class="wrapper">
  <div class="photos">
    <div class="photo">
      <img src="https://placehold.it/200x150/0bf" />
      <div class="photo-legend">TEST DESCRIPTION</div>
    </div>
    <div class="photo">
      <img src="https://placehold.it/200x200/f0b" />
    </div>
    <div class="photo">
      <img src="https://placehold.it/200x150/bf0" />
    </div>
  </div>
</div>

于 2013-08-28T19:52:01.817 に答える
1

z-index の使用を試すことができます。z-index が大きい要素は、常に z-index が小さい要素の前にあります。メイン コンテナが overflow:hidden でない場合は、これを試すことができます。

これがどのように機能するかを確認できる例です。お役に立てば幸いです。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

于 2013-08-28T18:30:06.040 に答える
1

div に次のいずれかのクラスを与えることをお勧めします。

  • 左の列にあるものを収集
  • 右の列にあるものに適しています
  • 一番上の行にあるものはrowtop
  • 一番下の行のrowbottom

次に、次のプロパティを割り当てます

.colleft {
    transform-origin-x: 0%;
}

....

    transform-origin-x: 100%;
    transform-origin-y: 0%;
    transform-origin-y: 100%;

（それぞれ）

これにより、ズームが目的の方向に移動します。

エヴァン・ストッダード修正フィドル

于 2013-08-28T18:46:02.397 に答える