20

円の中に正方形の画像を入れたいです。

ユーザーが画像にカーソルを合わせると、画像が拡大縮小 (拡大) されます。

円は同じサイズのままにする必要があります。

CSS トランジションの間のみ、四角形の画像が円に重なります (overflow:hidden がまったく存在しないかのように)。

Chrome と Safari で奇妙な動作をするデモを次に示します: http://codepen.io/jshawl/full/flbau

firefoxでは問題なく動作しています。

4

4 に答える 4

49

このコードを img の親に追加する必要があります:

position:relative;
z-index:1;

ここでの例: http://codepen.io/DavidN/pen/dIzJK

于 2014-10-14T10:13:16.820 に答える
22

余分なマークアップ (円と正方形のコンテナーは 1 つしか必要ありません) を削除し、img 自体のスタイルを設定しました。

#wrapper {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

#test {
  width: 100%;
  height: 100%;
  transition: all 2s linear;
}

#test:hover {
  transform: scale(1.2);
}
<div id="wrapper">
  <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test">
</div>

于 2013-06-01T23:40:02.247 に答える
2

あまりにも多くの要素をスタイリングしているように見えます! ここにフォークを作成しました

SASS コードの一部を編集して、コンパス ライブラリを利用し、ここで確認できるtransitionおよびプロパティをより有効に活用しました。transform

body { padding: 3em; }

.circle {
    height: 500px;
    width: 500px;
    border: 1px solid black;
    @include border-radius(500px);
    overflow: hidden;
}

.circle img {
    height: 500px;
    width: 500px;
    @include transition(all 0.3s ease);
    &:hover { @include transform(scale(1.1)); }
}

うまくいけば、これが役に立ちます！要素は、スペースに関する一般的な情報 (幅や高さなど)circleを持つ親コンテナーと考え​​てください。画像自体の縁が丸くなっています。これが編集したい要素です! 親コンテナを操作せずに、ここでこの要素をスケーリングおよび変換できます。ライブラリの使用に関する追加情報については、コンパスを参照してください。幸運を！500px500px500pxcircle

于 2013-06-01T23:54:35.017 に答える